setTimeout定時器-初學--遇坑-微信小程式
阿新 • • 發佈:2019-01-10
在微信小程式開發中,由於用到動畫效果,所以就大致瞭解了setTimeout,結果在使用中遇到一些情況,經過驗證,及通過檢視網上幾篇帖子,知道自己錯在哪了,特意貼出其中的部分程式碼,望能幫助大家避免進坑。嘿嘿,
submit_to_top:function(){ const that=this;/*定時器裡使用的引數變數定義時必須加const關鍵字,否則報錯*/ that.data.count1 = that.data.count1 + that.data.count2; console.log('-1') that.data.count2 =0; if (that.data.count1>0){ that.data.count1_display=true; that.animation_fun_go();//呼叫動畫 } /*設定定時器*/ setTimeout(function () { that.setData(that.data); that.setData({ animation_pic_display: 'none', way:'step-start'}); console.log('0')/*列印輸出驗證資訊*/
that.setData({ x: that.data.x_back, y: that.data.y_back, time: that.data.time_back}); that.animation_fun_go();/*執行動畫*/ console.log('1') setTimeout(function(){ /*又設定了一個定時器,因為上面的動畫還沒執行完,下面的程式碼就已經把資料更新了,容易造成資料不同步,達不到設計的效果*/ console.log('2') that.setData({ animation_pic_display: 'block', way:'ease-out'}); that.setData({ x: that.data.x_go, y: that.data.y_go, time: that.data.time_go }); console.log('3') },30) console.log('4') }, 240)/*定時器240毫秒後,執行括號內部程式碼*/ console.log('5') }
驗證的引數的輸出順序:-1、5、0、1、4、2、3
注:
setTimeout屬於非同步執行函式,遇到setTimeout會將該函式放入等待佇列,等待當前主程式執行完畢後開始執行setTimeout。
上述程式碼塊中,涉及到定時器的巢狀,在定時器內部執行時仍遵循上述規則