vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯(cuò)的問題
1.在vue項(xiàng)目中的js代碼語法與之前使用js和jquery還是有所出入的,現(xiàn)遇到一個(gè)點(diǎn)擊按鈕出現(xiàn)倒計(jì)時(shí)30S的效果
相信大家對著兩個(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未定義,此處對于定時(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對象。
所以為了使this正確指向vue,我用了ES6的尖頭函數(shù)。
setTimeout(() => { this.time();}, 1000)
尖頭函數(shù)因?yàn)樗奶厥庑裕膖his指向它外層的對象。
補(bǔ)充知識:Vue使用Element UI,校驗(yàn)不生效
vue中v-model=v-bind+v-on(@)
所以習(xí)慣使用v-model
今天使用Element UI 的el-form
發(fā)現(xiàn)el-input無論填什么值校驗(yàn)都過不了,百思不解
最后把v-model改為:model解決
然后看了下文檔,確實(shí)使用的是:model綁定
真是個(gè)弱智的問題
以上這篇vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯(cuò)的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. python全棧開發(fā)語法總結(jié)2. Python調(diào)用接口合并Excel表代碼實(shí)例3. Python如何批量生成和調(diào)用變量4. ASP.Net Core對USB攝像頭進(jìn)行截圖5. 如何在Python項(xiàng)目中引入日志6. 通過CSS數(shù)學(xué)函數(shù)實(shí)現(xiàn)動(dòng)畫特效7. python b站視頻下載的五種版本8. Python快速將ppt制作成配音視頻課件的操作方法9. ASP.Net Core(C#)創(chuàng)建Web站點(diǎn)的實(shí)現(xiàn)10. ajax動(dòng)態(tài)加載json數(shù)據(jù)并詳細(xì)解析
