vue 解決setTimeOut和setInterval函數(shù)無(wú)效報(bào)錯(cuò)的問(wèn)題
1.在vue項(xiàng)目中的js代碼語(yǔ)法與之前使用js和jquery還是有所出入的，現(xiàn)遇到一個(gè)點(diǎn)擊按鈕出現(xiàn)倒計(jì)時(shí)30S的效果
相信大家對(duì)著兩個(gè)函數(shù)都陌生，就是一個(gè)定時(shí)器，setTimeOut只執(zhí)行一次，而setInterval會(huì)重復(fù)執(zhí)行
需要注意的是：在setInterval不用的時(shí)候一定要用clearSetInterval關(guān)閉定時(shí)器。
2.按照最原始的倒計(jì)時(shí)效果，實(shí)現(xiàn)如下：
//獲取30s 控制操作倒計(jì)時(shí)
time(){
if(this.timeWait <= 0){
this.timeWait = 0;
return;
}else{
this.timeWait--;
}
setTimeout(function(){
this.time();
}, 1000)
},
此處出現(xiàn)了錯(cuò)誤，報(bào)錯(cuò)信息為time未定義，此處對(duì)于定時(shí)器方法其實(shí)并沒(méi)有錯(cuò)
3.原因是 老生常談的javaScript 的this 的問(wèn)題。
因?yàn)橛玫囊粋€(gè)
function(){
}
這里的 獨(dú)立的作用域 this指向了全局（這里是window）而且window里沒(méi)有time這個(gè)函數(shù)報(bào)了錯(cuò)。
4.用過(guò)vue的朋友應(yīng)該，基本vue中都是this.XXX這樣寫。這里的this是Vue對(duì)象。
所以為了使this正確指向vue，我用了ES6的尖頭函數(shù)。
setTimeout(() => {
this.time();
}, 1000)
尖頭函數(shù)因?yàn)樗奶厥庑?，它的this指向它外層的對(duì)象。
補(bǔ)充知識(shí)：Vue使用Element UI，校驗(yàn)不生效
vue中v-model=v-bind+v-on(@)
所以習(xí)慣使用v-model
今天使用Element UI 的el-form
發(fā)現(xiàn)el-input無(wú)論填什么值校驗(yàn)都過(guò)不了，百思不解
最后把v-model改為:model解決
然后看了下文檔，確實(shí)使用的是:model綁定
真是個(gè)弱智的問(wèn)題
以上這篇vue 解決setTimeOut和setInterval函數(shù)無(wú)效報(bào)錯(cuò)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue實(shí)現(xiàn)開(kāi)心消消樂(lè)游戲算法
這篇文章主要介紹了使用Vue寫一個(gè)開(kāi)心消消樂(lè)游戲，游戲算法在文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
Vue生態(tài)系統(tǒng)工具庫(kù)Vueuse的使用示例詳解
Vueuse 是一個(gè)功能強(qiáng)大的 Vue.js 生態(tài)系統(tǒng)工具庫(kù),它提供了一系列的可重用的 Vue 組件和函數(shù),本文將介紹 Vueuse 的主要特點(diǎn)和用法,以及它在 Vue.js 開(kāi)發(fā)中的作用和優(yōu)勢(shì),感興趣的可以了解下2024-02-02
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Vue3使用ref與reactive創(chuàng)建響應(yīng)式對(duì)象的示例代碼
這篇文章主要詳細(xì)介紹了Vue3使用ref與reactive創(chuàng)建響應(yīng)式對(duì)象的方法步驟,文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-02-02
Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法,文中通過(guò)代碼示例講解的講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
Vue中ref、computed與reactive使用頻率現(xiàn)象分析(示例詳解)
這篇文章主要分析了Vue中的ref、computed和reactive三個(gè)響應(yīng)式API的使用頻率和優(yōu)勢(shì),ref適合處理簡(jiǎn)單數(shù)據(jù)類型的響應(yīng)式需求,感興趣的朋友跟隨小編一起看看吧2024-11-11
vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址(推薦)
這篇文章主要介紹了vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
vuejs開(kāi)發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理
這篇文章主要介紹了vuejs開(kāi)發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理,需要的朋友可以參考下2017-03-03
VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例
這篇文章主要介紹了VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例，VeeValidate是Vue.js的驗(yàn)證庫(kù)，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05