setTimeout在vue中的正確使用方式
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就會訪問到這個變量，就會得到當前對象。
export default {
methods: {
start: function () {
let _this=this
setTimeout(function() {
_this.end()//娃娃消失
}, 4000);
}
}
}注意：
當在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)中對應的變量。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vxe-list?vue?如何實現(xiàn)下拉框的虛擬列表
這篇文章主要介紹了vxe-list?vue?如何實現(xiàn)下拉框的虛擬列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
在vue開發(fā)中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項目接口管理，具有一定的參考價值，感興趣的小伙伴可以一起來了解一下2019-01-01
vue如何使用driver.js實現(xiàn)項目功能向導指引
driver.js 是一個輕量級、無依賴的原生JavaScript引擎，在整個頁面中驅動用戶的注意力，強大的、高度可定制的原生JavaScript引擎，無外部依賴，支持所有主流瀏覽器，這篇文章主要介紹了vue如何使用driver.js實現(xiàn)項目功能向導指引,需要的朋友可以參考下2023-03-03
本文由淺入深觀摩vue-router源碼是如何通過hash與History interface兩種方式實現(xiàn)前端路由，介紹了相關原理，并對比了兩種方式的優(yōu)缺點與注意事項。最后分析了如何實現(xiàn)可以直接從文件系統(tǒng)加載而不借助后端服務器的Vue單頁應用。2021-05-05
這篇文章主要介紹了vue組件之間通信,結合實例形式分析了vue父子組件、兄弟組件之間通信的原理、實現(xiàn)方法,并給出了一個類似點贊功能的總結實例,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結，結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
vue3實戰(zhàn)-axios請求封裝問題(get、post、put、delete)
這篇文章主要介紹了vue3實戰(zhàn)-axios請求封裝問題(get、post、put、delete)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
VUEJS實戰(zhàn)之利用laypage插件實現(xiàn)分頁（3）
這篇文章主要為大家詳細介紹了VUEJS實戰(zhàn)之修復錯誤并且美化時間，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了vue 內(nèi)置過濾器的使用總結(附加自定義過濾器)，詳細的介紹了各種過濾器的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細介紹了Vue.js組件tab實現(xiàn)選項卡切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05