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í)并沒有錯(cuò)
3.原因是 老生常談的javaScript 的this 的問(wèn)題。
因?yàn)橛玫囊粋€(gè)
function(){
}
這里的 獨(dú)立的作用域 this指向了全局(這里是window)而且window里沒有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. Spring security 自定義過(guò)濾器實(shí)現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實(shí)例代碼)2. Java8內(nèi)存模型PermGen Metaspace實(shí)例解析3. 聊聊python在linux下與windows下導(dǎo)入模塊的區(qū)別說(shuō)明4. ASP.NET MVC使用正則表達(dá)式驗(yàn)證手機(jī)號(hào)碼5. 一文搞懂 parseInt()函數(shù)異常行為6. Python使用sftp實(shí)現(xiàn)上傳和下載功能7. Python max函數(shù)中key的用法及原理解析8. python學(xué)習(xí)之plot函數(shù)的使用教程9. python捕獲警告的三種方法10. Python基于百度AI實(shí)現(xiàn)抓取表情包
