Vue equivalent of setTimeout

Question

I m making a shopping cart system with Laravel and Vue  When I add an item to the basket  I display a confirmation message by toggling a Vue variable being watched by a v-if    lt div class  alert alert-success  v-if  basketAddSuccess  transition  expand  gt Added to the basket lt  div gt    And the JS   addToBasket  function                    item   this product                  this  http post   api buy addToBasket   item                   this basketAddSuccess   true                   And yes  I will be adding this in a then-catch shortly    This works fine and the message appears  However  I d like the message to disappear again after a certain time  say a few seconds  How can I do this with Vue  I ve tried setTimeOut but Vue doesn t seem to like it  saying it s undefined   EDIT  I was misspelling setTimeout like an idiot  However  it still doesn t work   My function is now   addToBasket  function                    item   this photo                  this  http post   api buy addToBasket   item                   this basketAddSuccess   true                  setTimeout function                        this basketAddSuccess   false                     2000

User · Answer

There s no need for bind this  when you are using arrow functions     setTimeout      gt           some code       500

User · Answer

after encountering the same issue  I ended up on this thread  For future generation s sake  The current up-most voted answer  attempts to bind  this  to a variable in order to avoid changing the context when invoking the function which is defined in the setTimeout   An alternate and more recommended approach using Vue JS 2 2  amp  ES6  is to use an arrow function in order to bind the context to the parent  Basically  addToBasket  s  this  and the  setTimeout  s  this  would still refer to the same object    addToBasket  function            item   this photo          this  http post   api buy addToBasket   item           this basketAddSuccess   true          setTimeout      gt                this basketAddSuccess   false             2000

User · Answer

Kevin Muchwat above has the BEST answer  despite only 10 upvotes and not selected answer   setTimeout function          this basketAddSuccess   false   bind this   2000    Let me explain WHY    Arrow Function  is ECMA6 ECMA2015  It s perfectly valid in compiled code or controlled client situations  cordova phone apps  Node js   and it s nice and succinct  It will even probably pass your testing   However  Microsoft in their infinite wisdom has decided that Internet Explorer WILL NOT EVER SUPPORT ECMA2015   Their new Edge browser does  but that s not good enough for public facing websites   Doing a standard function     and adding  bind this  however is the ECMA5 1  which IS fully supported  syntax for the exact same functionality   This is also important in ajax post  then else calls  At the end of your  then function     you need to bind this  there as well so    then function   this flag   true  bind this    I would have added this as a comment to Kevin s response  but for some silly reason it takes less points to post replies than to comment on replies  DO NOT MAKE THE SAME MISTAKE I MADE   I code on a Mac  and used the 48 points upvoted comment which worked great  Until I got some calls on my scripts failing and I couldn t figure out why  I had to go back and update dozens of calls from arrow syntax to function     bind this  syntax   Thankfully I found this thread again and got the right answer  Kevin  I am forever grateful   As per the  Accepted answer   that has other potential issues dealing with additional libraries  had problems properly accessing updating Vue properties functions

User · Answer

please use setInterval like below      setInterval     gt  this checkOrder    2000

User · Answer

You can use Vue nextTick  addToBasket  function                    item   this photo                  this  http post   api buy addToBasket   item                   this basketAddSuccess   true                  Vue nextTick      gt                       this basketAddSuccess   false

User · Answer

It is likely a scope issue  Try the following instead   addToBasket  function        item   this photo      this  http post   api buy addToBasket   item       this basketAddSuccess   true      var self   this      setTimeout function            self basketAddSuccess   false         2000

User · Answer

If you want to use the this keyword in your function  you need to write the setTimeout function in ES6  setTimeout      gt       this filters max budget gt eq   this budgetHigherValue     1000

User · Answer

Arrow Function  The best and simplest way to solve this problem is by using an arrow function      gt           addToBasket             var item   this photo          this  http post   api buy addToBasket   item           this basketAddSuccess   true             now  this  is referencing the Vue object and not the  setTimeout  scope         setTimeout      gt  this basketAddSuccess   false  2000           This works because the this of arrow functions is bound to the this of its enclosing scope- in Vue  that s the parent  enclosing component  Inside a traditional function called by setTimeout  however  this refers to the window object  which is why you ran into errors when you tried to access this basketAddSuccess in that context    Argument Passing  Another way of doing this would be passing this as an arg to your function through setTimeout s prototype using its setTimeout callback  delay  arg1  arg2       form       addToBasket             item   this photo          this  http post   api buy addToBasket   item           this basketAddSuccess   true            Add scope argument to func  pass this after delay in setTimeout         setTimeout function scope                 scope basketAddSuccess   false             2000  this            It s worth noting that the arg passing syntax is incompatible with IE 9 and below  however    Local Variable  Another possible  but less eloquent and less encouraged  way is to bind this to a var outside of setTimeout       addToBasket             item   this photo          this  http post   api buy addToBasket   item           this basketAddSuccess   true            Declare self  which is accessible inside setTimeout func         var self   this          setTimeout function                  self basketAddSuccess   false             2000           Using an arrow function would eliminate the need for this extra variable entirely however  and really should be used unless something else is preventing its use

User · Answer

use this animationStop  not use this animationStop      animationRun        this sliderClass anim   true      setTimeout this animationStop  500

User · Answer

Add bind this  to your setTimeout callback function  setTimeout function          this basketAddSuccess   false   bind this   2000

User · Answer

ES6 can bind  this   setTimeout      gt        5000

User · Answer

Arrow Function  The best and simplest way to solve this problem is by using an arrow function      gt           addToBasket             var item   this photo          this  http post   api buy addToBasket   item           this basketAddSuccess   true             now  this  is referencing the Vue object and not the  setTimeout  scope         setTimeout      gt  this basketAddSuccess   false  2000           This works because the this of arrow functions is bound to the this of its enclosing scope- in Vue  that s the parent  enclosing component  Inside a traditional function called by setTimeout  however  this refers to the window object  which is why you ran into errors when you tried to access this basketAddSuccess in that context    Argument Passing  Another way of doing this would be passing this as an arg to your function through setTimeout s prototype using its setTimeout callback  delay  arg1  arg2       form       addToBasket             item   this photo          this  http post   api buy addToBasket   item           this basketAddSuccess   true            Add scope argument to func  pass this after delay in setTimeout         setTimeout function scope                 scope basketAddSuccess   false             2000  this            It s worth noting that the arg passing syntax is incompatible with IE 9 and below  however

User · Answer

vuejs 2  first add this to methods  methods       sayHi  function            var v   this        setTimeout function              v message    Hi Vue           3000          after that call this method on mounted  mounted        this sayHi

[javascript] Vue equivalent of setTimeout?

Examples related to javascript

Examples related to vue.js