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)樗奶厥庑裕膖his指向它外層的對(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è)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP基礎(chǔ)知識(shí)VBScript基本元素講解2. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條3. Python 合并拼接字符串的方法4. Linux刪除系統(tǒng)自帶版本Python過(guò)程詳解5. Python3 json模塊之編碼解碼方法講解6. python 使用事件對(duì)象asyncio.Event來(lái)同步協(xié)程的操作7. Python sublime安裝及配置過(guò)程詳解8. Python 利用Entrez庫(kù)篩選下載PubMed文獻(xiàn)摘要的示例9. Python 制作查詢商品歷史價(jià)格的小工具10. Python插件機(jī)制實(shí)現(xiàn)詳解

網(wǎng)公網(wǎng)安備