setTimeout在vue中的正確使用方式
setTimeout在vue中的正確使用
筆者最近因?yàn)楣拘枨箝_發(fā)使用vue和jquery開發(fā)抓娃娃H5極簡(jiǎn)小游戲，使用到setTimeout函數(shù)。
遇到了1個(gè)坑
在vue的某個(gè)方法(點(diǎn)擊后執(zhí)行)
setTimeout(this.end(),4000);//娃娃消失
這里奇怪的是,end方法的確被執(zhí)行了。但是沒有執(zhí)行4s后執(zhí)行的效果。那我要你合用呢！其實(shí)，問題還是出在筆者身上，大家請(qǐng)看下圖
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)前對(duì)象。
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對(duì)象。
拓展知識(shí)：
解決vue在setTimeout內(nèi)修改this失效
要想setTimeout指向正確的值，可以使用如下方法：
使用箭頭函數(shù)
export default {
methods: {
start: function () {
setTimeout(() => {
this.end()//娃娃消失
}, 4000);
}
}
}此時(shí)函數(shù)的this指向的是定義它的時(shí)候的對(duì)象，也就是this指向了data內(nèi)中對(duì)應(yīng)的變量。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例
下面小編就為大家分享一篇vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue3 源碼導(dǎo)讀(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問題
這篇文章主要介紹了Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vite創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目
本文主要介紹了vite創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐
這篇文章主要介紹了淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了在Vue中如何實(shí)現(xiàn)自定義hooks(組合式)函數(shù)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
基于Vue.js實(shí)現(xiàn)數(shù)字拼圖游戲
為了進(jìn)一步讓大家了解Vue.js的神奇魅力，了解Vue.js的一種以數(shù)據(jù)為驅(qū)動(dòng)的理念，本文主要利用Vue實(shí)現(xiàn)了一個(gè)數(shù)字拼圖游戲，其原理并不是很復(fù)雜，下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)。2016-08-08
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器。下面通過實(shí)例代碼給大家介紹vue2中filter()的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-07-07
淺析Proxy可以優(yōu)化vue的數(shù)據(jù)監(jiān)聽機(jī)制問題及實(shí)現(xiàn)思路
這篇文章主要介紹了淺析Proxy可以優(yōu)化vue的數(shù)據(jù)監(jiān)聽機(jī)制問題及實(shí)現(xiàn)思路,需要的朋友可以參考下2018-11-11