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