setTimeout在vue中的正確使用

筆者最近因為公司需求開發(fā)使用vue和jquery開發(fā)抓娃娃H5極簡小游戲，使用到setTimeout函數(shù)。

遇到了1個坑

在vue的某個方法(點擊后執(zhí)行)

setTimeout(this.end(),4000);//娃娃消失

這里奇怪的是,end方法的確被執(zhí)行了。但是沒有執(zhí)行4s后執(zhí)行的效果。那我要你合用呢！其實，問題還是出在筆者身上，大家請看下圖

setTimeout的定義和用法。

問題出在我的格式上面

其實是支持兩種調(diào)用方式：1 字符 2 函數(shù)體（文章解決方式）

解決方法如下：

1、定義一個_this暫存this

2、再改變變量的值，則生效啦

3、方法中將this存在變量_this中，此時執(zhí)行setTimeout函數(shù)時，setTimeout函數(shù)內(nèi)的_this就會訪問到這個變量，就會得到當(dāng)前對象。

export default {
 
 methods: {
 
  start: function () {
  
   let _this=this
   setTimeout(function()  {
 
    _this.end()//娃娃消失
 
   }, 4000);
 
  }
 
 }
 
}

注意：

當(dāng)在vue中使用定時器在function里直接使用this，發(fā)現(xiàn)沒有效果，這是由于setTimeout函數(shù)調(diào)用的代碼運行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上，這會使得this指向的是window對象。

拓展知識：

解決vue在setTimeout內(nèi)修改this失效

要想setTimeout指向正確的值，可以使用如下方法：

使用箭頭函數(shù)

export default {
 
 methods: {
 
  start: function () {
 
   setTimeout(() => {
 
    this.end()//娃娃消失
 
   }, 4000);
 
  }
 
 }
 
}

此時函數(shù)的this指向的是定義它的時候的對象，也就是this指向了data內(nèi)中對應(yīng)的變量。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。