Assigning a setTimeout function to a Vue method

Question

I have currently assigned a setTimeout function to a Vue method and I want to use clearTimeout for this function. Is that possible? If so, how can I do this?

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

You should follow your consideration of using a method instead. — jdlm
– jdlm, Commented Mar 20, 2020 at 8:01
@AEB yes, you can store the id of the timeout in Vue data property & clearTimeout with that id in an another fn as answered below. — Shivam Singh
– Shivam Singh, Commented Mar 20, 2020 at 9:33

Shivam Singh · Accepted Answer · 2020-03-20 09:29:30Z

3

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>

answered Mar 20, 2020 at 9:29

Shivam Singh

1,7411 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jdlm · Accepted Answer · 2020-03-20 07:58:31Z

0

Why do you need to assign a function to a Vue component's data?

setTimeout() will execute the function 3000 ms later and give the timer to this.timeout. The timer will never execute again, no matter where you assign to.

edited Mar 20, 2020 at 7:58

jdlm

6,7545 gold badges34 silver badges50 bronze badges

answered Mar 20, 2020 at 7:50

bryce on the tree

193 bronze badges

1 Comment

Shivam Singh Over a year ago

there are scenarios where it's required to clear the setTimeout before it has done executing the callback function, eg. we often clear timeouts in debounce

Collectives™ on Stack Overflow

Assigning a setTimeout function to a Vue method

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related