setTimeout定時器-初學--遇坑-微信小程序

在微信小程序開發中，由於用到動畫效果，所以就大致瞭解了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。

上述代碼塊中，涉及到定時器的嵌套，在定時器內部執行時仍遵循上述規則