setTimeout在vue中的正確使用

筆者最近因?yàn)楣拘枨箝_發(fā)使用vue和jquery開發(fā)抓娃娃H5極簡小游戲，使用到setTimeout函數(shù)。

遇到了1個(gè)坑

在vue的某個(gè)方法(點(diǎn)擊后執(zhí)行)

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

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

setTimeout的定義和用法。

問題出在我的格式上面

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

解決方法如下：

1、定義一個(gè)_this暫存this

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

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

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

注意：

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

拓展知識：

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

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

使用箭頭函數(shù)

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

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

總結(jié)

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