Question

我目前正在通过视频课程学习VueJS。我当时正在做有关指令的练习，但是有点生气。无论如何，我的目标是通过将鼠标悬停在“ Disco Time”按钮上来获得“迪斯科效果”。效果很好，但是我也想在离开按钮时清除间隔。我尝试了几件事（例如，在另一种方法中调用清除间隔），我很确定当前的解决方案不是一个很好的解决方案，但是据我所知它至少应该起作用。您能告诉我为什么它不起作用以及它如何起作用吗？我也会对更好的解决方案感兴趣（但请使用指令，因为这是我的目标）。

感谢帮助noobie（：

<script>
    export default {
        data() {
            return {
              showing: false,
              color: 'lightgreen',
              stopIt: false,
              stopItt: false,
            }
        },
        directives: {
            'myEvent': {
                bind(el, binding) {
                    const type = binding.arg
                    const fn = binding.value
                    el.addEventListener(binding.arg, binding.value)
                }
            }
        },
        methods: {
            change() {
                this.showing = !this.showing;
                this.color == 'lightgreen' ? this.color = 'lightblue' : this.color = 'lightgreen';
            },

            disco() {
                if (this.stopIt == false) {
                    var myDisco = setInterval(() => {
                    this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen'
                  }, 100)
                }
                else if (this.stopIt == true) {
                    setTimeout(() => {
                    clearInterval(myDisco)}, 1000)
                }
            },
            stopDisco() {
                  this.stopIt = true
                  //this.stopItt = true
                  this.disco();
            },
      }
}
</script>

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <div :style="{color: color}">
                  <h1>Directives Exercise</h1>
                </div>
                <button v-myEvent:click="change" class="btn btn-primary">Show me!</button>
                <button v-myEvent:mouseover="disco" v-myEvent:mouseleave="stopDisco" class="btn btn-primary">Disco Time!</button>
                <p v-if="showing">
                  Now you see me!
                </p>
                <p>
                  {{ stopIt }}, {{ stopItt }}
                </p>
            </div>
        </div>
    </div>
</template>

Answer 1

每次调用disco时，myDisco是一个不同的变量。您无法以这种方式清除旧的。相反，请清除回调：

disco() {
  this.stopIt = false;
  const myDisco = setInterval(() => {
    this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen';
    if (this.stopIt) {
      clearInterval(myDisco);
    }
  }, 100)
},
stopDisco() {
  this.stopIt = true
},

下面的演示可运行代码段。

new Vue({
  el: '.container',
  data() {
    return {
      showing: false,
      color: 'lightgreen',
      stopIt: false,
      stopItt: false,
    }
  },
  directives: {
    'myEvent': {
      bind(el, binding) {
        const type = binding.arg
        const fn = binding.value
        el.addEventListener(binding.arg, binding.value)
      }
    }
  },
  methods: {
    change() {
      this.showing = !this.showing;
      this.color == 'lightgreen' ? this.color = 'lightblue' : this.color = 'lightgreen';
    },

    disco() {
      this.stopIt = false;
      const myDisco = setInterval(() => {
        this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen';
        if (this.stopIt) {
          clearInterval(myDisco);
        }
      }, 100)
    },
    stopDisco() {
      this.stopIt = true
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
      <div :style="{color: color}">
        <h1>Directives Exercise</h1>
      </div>
      <button v-my-event:click="change" class="btn btn-primary">Show me!</button>
      <button v-my-event:mouseover="disco" v-my-event:mouseleave="stopDisco" class="btn btn-primary">Disco Time!</button>
      <p v-if="showing">
        Now you see me!
      </p>
      <p>
        {{ stopIt }}, {{ stopItt }}
      </p>
    </div>
  </div>
</div>

Answer 2

当前方法不起作用的原因是disco（）中的myDisco变量的作用域是该函数，因此当您再次调用它以尝试清除间隔时，会得到一个新的空myDisco而不是其中一个包含间隔ID。

解决此问题的一种简单方法是将间隔ID本身放在data（）中，而不是单独的stopIt布尔值：

new Vue({
  el: '.container',
  data() {
    return {
      myDisco: undefined,
      color: 'lightgreen',
    }
  },
  directives: {
    'myEvent': {
      bind(el, binding) {
        el.addEventListener(binding.arg, binding.value)
      }
    }
  },
  methods: {
    disco() {
      this.stopDisco(); // just in case there's any chance of calling disco() twice in a row...
      this.myDisco = setInterval(() => {
        this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen';
      }, 100)
    },
    stopDisco() {
      clearInterval(this.myDisco); // will be a harmless no-op if myDisco is false
      this.myDisco = undefined; // not strictly necessary, but just to be tidy
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
  <div :style="{color: color}">
    <h1>Directives Exercise</h1>
  </div>
  <button v-my-event:mouseover="disco" v-my-event:mouseleave="stopDisco" class="btn btn-primary">Disco Time!</button>
  
  <div>Interval ID: {{myDisco}}</div>
</div>

Vue JS-在mouseleave上清除间隔

2 个答案: