vue 解決setTimeOut和setInterval函數(shù)無(wú)效報(bào)錯(cuò)的問題
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í)并沒有錯(cuò)
3.原因是 老生常談的javaScript 的this 的問題。
因?yàn)橛玫囊粋€(gè)
function(){
}
這里的 獨(dú)立的作用域 this指向了全局（這里是window）而且window里沒有time這個(gè)函數(shù)報(bào)了錯(cuò)。
4.用過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)都過不了，百思不解
最后把v-model改為:model解決
然后看了下文檔，確實(shí)使用的是:model綁定
真是個(gè)弱智的問題
以上這篇vue 解決setTimeOut和setInterval函數(shù)無(wú)效報(bào)錯(cuò)的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Jenkins自動(dòng)化部署Vue項(xiàng)目的方法實(shí)現(xiàn)
本文主要介紹了Jenkins自動(dòng)化部署Vue項(xiàng)目的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭）
這篇文章主要介紹了vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue中使用jsencrypt進(jìn)行RSA非對(duì)稱加密的操作方法
這篇文章主要介紹了Vue中使用jsencrypt進(jìn)行RSA非對(duì)稱加密，在這里需要注意要加密的數(shù)據(jù)必須是字符串，對(duì)Vue?RSA非對(duì)稱加密相關(guān)知識(shí)感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下2018-05-05
Vue中的偵聽器是一種響應(yīng)式機(jī)制，可以對(duì)指定的數(shù)據(jù)進(jìn)行監(jiān)聽，并在數(shù)據(jù)變化時(shí)執(zhí)行相應(yīng)的回調(diào)函數(shù)。常用于監(jiān)聽復(fù)雜數(shù)據(jù)類型的變化，如對(duì)象和數(shù)組。通過偵聽器，可以實(shí)現(xiàn)數(shù)據(jù)的自動(dòng)更新和邏輯處理等功能，提高代碼的可讀性和可維護(hù)性2023-05-05
詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家剖析了Vue原理，實(shí)現(xiàn)雙向綁定MVVM，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了vue3中websocket的封裝與使用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12