javascript - 将 setTimeout 函数分配给 Vue 方法

Question

我当前已将 setTimeout 函数分配给 Vue 方法，并且我想为此函数使用clearTimeout。那可能吗？如果是这样，我该怎么做？

    methods: {
        timeoutController() {
          setTimeout(function() {
            this.controllerShown = false;
          }, 3000);
        }
....

Answer 1

new Vue({
  el: '#app',
  
  data: {
    timer: null
  },
  
  methods: {
    startTimer () {
      this.timer = setTimeout(() => {
        console.log("execute me")
      }, 3000)
    },
    // If you kill the timer before setTimeout callback has been executed the callback wont get executed
    killTimer () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="startTimer()">start</button>
  <button @click="killTimer()">kill</button>
</div>