51-setTimeout在vue中的正確使用之this問題

原文：https://blog.csdn.net/qq_27295403/article/details/83375574

參考：https://www.jianshu.com/p/4b5dd9708bbd

筆者最近因為公司需求開發使用vue和jquery開發抓娃娃H5極簡小游戲，使用到setTimeout函數。遇到了1個坑:

1.  
   在vue的某個方法(點擊后執行)
2.  
   setTimeout(this.end(),4000);//娃娃消失

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

setTimeout的定義和用法。問題出在我的格式上面

其實是支持兩種調用方式：1 字符 2 函數體（文章解決方式）

解決方法如下：

1、定義一個_this暫存this

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

3、方法中將this存在變量_this中，此時執行setTimeout函數時，setTimeout函數內的_this就會訪問到這個變量，就會得到當前對象。

1.  
   export default {
2.  
    
3.  
    methods: {
4.  
    
5.  
     start: function () {
6.  
    
7.  
   let _this=this
8.  
      setTimeout( function() {
9.  
    
10.  
        _this.end()//娃娃消失
11.  
     
12.  
       }, 4000);
13.  
     
14.  
      }
15.  
     
16.  
     }
17.  
     
18.  
    }

注意⚠️:

當在vue中使用定時器在function里直接使用this，發現沒有效果，這是由於setTimeout函數調用的代碼運行在與所在函數完全分離的執行環境上，這會使得this指向的是window對象。拓展知識：解決vue在setTimeout內修改this失效的問題

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

1、使用箭頭函數

1.  
   export default {
2.  
    
3.  
    methods: {
4.  
    
5.  
     start: function () {
6.  
    
7.  
      setTimeout(() => {
8.  
    
9.  
       this.end()//娃娃消失
10.  
     
11.  
       }, 4000);
12.  
     
13.  
      }
14.  
     
15.  
     }
16.  
     
17.  
    }

此時函數的this指向的是定義它的時候的對象，也就是this指向了data內中對應的變量。

碼字不易，對大家有用最佳