移動端イベント(四)-関数ジッタ防止と関数スロットル

関数ジッタ防止
関数の高周波数実行では、1回のみ実行されます.
次の2つのケースがあります.
　　　　1.末尾実行:高周波数トリガの場合、最後の実行のみ
　　　　2.ヘッド実行:高周波トリガ時、1回のみ実行
 
最後の実行は簡単で、まずタイマーを設定して、最初にトリガーしたときは実行しません.少し遅れてから実行します.次回実行するときは、前回のタイマーを消して、最後の実行しかできません.

 //          
 let nub = 0;
 let timer = 0;   
 box.onmousemove = function(){
     clearTimeout(timer);
     timer = setTimeout(()=>{
         console.log(1);
     },200);
}  

 
ヘッダの実行は複雑になりますが、ここでは変数をtrueとして追加し、まずこの変数がtrueであるかどうかを判断します.trueの場合はイベントを実行し、実行後はこの変数をfalseに設定します.そしてタイマーが終わったら、変数をtrueに設定します.

//       
let nub = 0;
let timer = 0;  
let isStart = true; 
box.onmousemove = function(){
    if(isStart){
        console.log(1);
        isStart = false;
    }
    clearTimeout(timer);
    timer = setTimeout(()=>{
        isStart = true;
    },200);
} 

 
かんすうしぼり
関数スロットル、実行間隔を大きくします.
関数の振れ止めと同じように頭と尾が実行されます.
 
末尾実行:同様にタイマーを呼び出して、まずタイマーが始まるかどうかを判断して、もし開いたら下へ実行しないで、タイマーは開いていないで更に下へ実行して、実行が終わった後に、タイマーを0に戻します

//     
 let timer = 0;
 box.onmousemove = function(){
     if(timer){
         return ;
     }
     timer = setTimeout(()=>{
         console.log(0);
         timer = 0;
     },1000);
 } 

 
ヘッド実行:タイマーをオンにする前に実行し、タイマーが次の実行を決定するときです.
 

//     
let timer = 0;
box.onmousemove = function(){
    if(timer){
        return ;
    }
    console.log(0);
    timer = setTimeout(()=>{
        timer = 0;
    },1000);
} 

 
明日は上の内容をカプセル化して、カプセル化したら箱を開けて使えます!