這篇文章主要介紹了setTimeout在vue中的正確使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
setTimeout在vue中的正確使用
筆者最近因為公司需求開發(fā)使用vue和jquery開發(fā)抓娃娃H5極簡小游戲，使用到setTimeout函數(shù)。文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
遇到了1個坑
在vue的某個方法(點擊后執(zhí)行)文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
1 | setTimeout(this.end(),4000);//娃娃消失 |
這里奇怪的是,end方法的確被執(zhí)行了。但是沒有執(zhí)行4s后執(zhí)行的效果。那我要你合用呢！其實，問題還是出在筆者身上，大家請看下圖文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
setTimeout的定義和用法。文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
問題出在我的格式上面
文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
其實是支持兩種調(diào)用方式：1 字符 2 函數(shù)體（文章解決方式）文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
解決方法如下：文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
1、定義一個_this暫存this文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
2、再改變變量的值，則生效啦文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
3、方法中將this存在變量_this中，此時執(zhí)行setTimeout函數(shù)時，setTimeout函數(shù)內(nèi)的_this就會訪問到這個變量，就會得到當(dāng)前對象。文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/39846.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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ù)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | export default {??methods: {???start: function () {????setTimeout(() => {?????this.end()//娃娃消失????}, 4000);???}??}?} |
此時函數(shù)的this指向的是定義它的時候的對象，也就是this指向了data內(nèi)中對應(yīng)的變量。
評論