setTimeout在vue中的正確使用方式
更新時間：2023年01月19日 10:51:02 作者：大唐錦繡
這篇文章主要介紹了setTimeout在vue中的正確使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
setTimeout在vue中的正確使用
筆者最近因為公司需求開發(fā)使用vue和jquery開發(fā)抓娃娃H5極簡小游戲，使用到setTimeout函數。
遇到了1個坑
在vue的某個方法(點擊后執(zhí)行)
setTimeout(this.end(),4000);//娃娃消失
這里奇怪的是,end方法的確被執(zhí)行了。但是沒有執(zhí)行4s后執(zhí)行的效果。那我要你合用呢！其實，問題還是出在筆者身上，大家請看下圖
setTimeout的定義和用法。
問題出在我的格式上面
其實是支持兩種調用方式：1 字符 2 函數體（文章解決方式）
解決方法如下：
1、定義一個_this暫存this
2、再改變變量的值，則生效啦
3、方法中將this存在變量_this中，此時執(zhí)行setTimeout函數時，setTimeout函數內的_this就會訪問到這個變量，就會得到當前對象。
export default {
methods: {
start: function () {
let _this=this
setTimeout(function() {
_this.end()//娃娃消失
}, 4000);
}
}
}注意：
當在vue中使用定時器在function里直接使用this，發(fā)現沒有效果，這是由于setTimeout函數調用的代碼運行在與所在函數完全分離的執(zhí)行環(huán)境上，這會使得this指向的是window對象。
拓展知識：
解決vue在setTimeout內修改this失效
要想setTimeout指向正確的值，可以使用如下方法：
使用箭頭函數
export default {
methods: {
start: function () {
setTimeout(() => {
this.end()//娃娃消失
}, 4000);
}
}
}此時函數的this指向的是定義它的時候的對象，也就是this指向了data內中對應的變量。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例
下面小編就為大家分享一篇vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue3 源碼導讀(推薦)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue源碼學習之Object.defineProperty 對數組監(jiān)聽
這篇文章主要介紹了vue源碼學習之Object.defineProperty 對數組監(jiān)聽，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue中的@blur事件 當元素失去焦點時所觸發(fā)的事件問題
這篇文章主要介紹了Vue中的@blur事件 當元素失去焦點時所觸發(fā)的事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vite創(chuàng)建一個標準vue3+ts+pinia項目
本文主要介紹了vite創(chuàng)建一個標準vue3+ts+pinia項目，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
這篇文章主要介紹了淺談vue后臺管理系統(tǒng)權限控制思考與實踐，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細介紹了在Vue中如何實現自定義hooks(組合式)函數，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-03-03
為了進一步讓大家了解Vue.js的神奇魅力，了解Vue.js的一種以數據為驅動的理念，本文主要利用Vue實現了一個數字拼圖游戲，其原理并不是很復雜，下面跟著小編一起來學習學習。2016-08-08
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器。下面通過實例代碼給大家介紹vue2中filter()的相關知識，感興趣的朋友一起看看吧2017-07-07
淺析Proxy可以優(yōu)化vue的數據監(jiān)聽機制問題及實現思路
這篇文章主要介紹了淺析Proxy可以優(yōu)化vue的數據監(jiān)聽機制問題及實現思路,需要的朋友可以參考下2018-11-11