setTimeout在vue中的正確使用方式

更新時(shí)間：2023年01月19日 10:51:02 作者：大唐錦繡

這篇文章主要介紹了setTimeout在vue中的正確使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

setTimeout在vue中的正確使用

筆者最近因?yàn)楣拘枨箝_(kāi)發(fā)使用vue和jquery開(kāi)發(fā)抓娃娃H5極簡(jiǎn)小游戲，使用到setTimeout函數(shù)。

遇到了1個(gè)坑

在vue的某個(gè)方法(點(diǎn)擊后執(zhí)行)

setTimeout(this.end(),4000);//娃娃消失

這里奇怪的是,end方法的確被執(zhí)行了。但是沒(méi)有執(zhí)行4s后執(zhí)行的效果。那我要你合用呢！其實(shí)，問(wèn)題還是出在筆者身上，大家請(qǐng)看下圖

setTimeout的定義和用法。

問(wèn)題出在我的格式上面

其實(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ì)訪問(wèn)到這個(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)沒(méi)有效果，這是由于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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue3 源碼導(dǎo)讀(推薦)
這篇文章主要介紹了Vue3 源碼導(dǎo)讀(推薦)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽(tīng)
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽(tīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
Vue中的@blur事件當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題
這篇文章主要介紹了Vue中的@blur事件當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題，具有很好的參考價(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)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐
這篇文章主要介紹了淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
詳解Vue如何自定義hooks(組合式)函數(shù)
這篇文章主要為大家詳細(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ù)雜，下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)。
2016-08-08
vue2中filter()的實(shí)現(xiàn)代碼
vue2.0里，不再有自帶的過(guò)濾器，需要自己定義過(guò)濾器。下面通過(guò)實(shí)例代碼給大家介紹vue2中filter()的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-07-07
淺析Proxy可以優(yōu)化vue的數(shù)據(jù)監(jiān)聽(tīng)機(jī)制問(wèn)題及實(shí)現(xiàn)思路
這篇文章主要介紹了淺析Proxy可以優(yōu)化vue的數(shù)據(jù)監(jiān)聽(tīng)機(jī)制問(wèn)題及實(shí)現(xiàn)思路,需要的朋友可以參考下
2018-11-11