解決vue的變量在settimeout內(nèi)部效果失效的問題
更新時(shí)間：2018年08月30日 09:49:43 作者：Tony3820
今天小編就為大家分享一篇解決vue的變量在settimeout內(nèi)部效果失效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
解決方法如下：
1、定義一個self暫存this
2、再改變變量的值，則生效啦
var self=this;
this.toastrVal = inVal;
this.loadState = true;
this.noBg = bgState;
setTimeout(function () {
self.loadState = false;
}, 3000)
拓展知識：解決vue在setTimeout內(nèi)修改this失效的問題
當(dāng)在vue中使用定時(shí)器來修改一個變量值的時(shí)候，發(fā)現(xiàn)沒有效果，這是由于setTimeout函數(shù)調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上，這會使得this指向的是window對象。
要想setTimeout指向正確的值，可以使用如下方法：
1、使用箭頭函數(shù)
export default {
data () {
return {
left: -9999,
bottom: -9999
}
},
methods: {
cancelMask: function () {
setTimeout(() => {
this.bottom = 0;
this.left = 0;
}, 500);
}
}
}
此時(shí)函數(shù)的this指向的是定義它的時(shí)候的對象，也就是this指向了data內(nèi)中對應(yīng)的變量。
2、將當(dāng)前對象的this保存為一個變量
export default {
data () {
return {
left: -9999,
bottom: -9999
}
},
methods: {
cancelMask: function () {
var that = this;
setTimeout(function () {
that.bottom = 0;
that.left = 0;
}, 500);
}
}
}
方法中將this存在一個對象中，此時(shí)執(zhí)行setTimeout函數(shù)時(shí)，setTimeout函數(shù)內(nèi)的that就會訪問到這個變量，就會得到當(dāng)前對象。
以上這篇解決vue的變量在settimeout內(nèi)部效果失效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)低版本瀏覽器升級提示的代碼示例
在現(xiàn)代Web開發(fā)中,瀏覽器兼容性是一個重要的問題,盡管大多數(shù)用戶已經(jīng)轉(zhuǎn)向了現(xiàn)代瀏覽器,但仍有一部分用戶可能仍在使用老舊的瀏覽器版本,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)低版本瀏覽器升級提示,并通過多個代碼示例來展示不同的應(yīng)用場景和技術(shù)點(diǎn),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue項(xiàng)目中使用多選框的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
vscode 配置vue+vetur+eslint+prettier自動格式化功能
這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動格式化功能，本文通過實(shí)例代碼圖文的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
在本篇文章里小編給大家整理的是關(guān)于vue中使用rem布局代碼詳解知識點(diǎn)，需要的朋友們參考下。2019-10-10
通過Vue?3,組合式API增強(qiáng)了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來和大家分享10個常用的Vue3組合式API,希望對大家有所幫助2024-01-01
詳解Vue返回值動態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動態(tài)生成表單及提交數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue3?路由配置與導(dǎo)航實(shí)戰(zhàn)教程
Vue?Router?提供了強(qiáng)大的路由管理能力,幫助開發(fā)者輕松構(gòu)建流暢、高效的單頁應(yīng)用,本文將帶你深入探討?Vue3?中的路由配置與導(dǎo)航操作,從安裝到實(shí)戰(zhàn),手把手教你掌握?Vue?Router?的使用技巧,需要的朋友可以參考下2025-03-03
Element樹形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能
最近做的項(xiàng)目用到了全選全不選功能,于是就自己動手寫了一個,這篇文章主要給大家介紹了關(guān)于Element樹形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue 翻頁組件vue-flip-page，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問題,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08