函數防抖and函數節流

函數防抖

函數防抖，這裡的抖動就是執行的意思，而一般的抖動都是持續的，多次的。

假設函數持續多次執行，我們希望讓它冷靜下來再執行。

也就是當持續觸發事件的時候，函數是完全不執行的，等最後一次觸發結束的一段時間之後，再去執行。

函數防抖的場景

• 登入、發短信等按鈕避免使用者點選太快，以緻于發送了多次請求，需要防抖

• 調整浏覽器視窗大小時，resize 次數過于頻繁，造成計算過多，此時需要一次到位，就用到了防抖

• 文本編輯器實時儲存，當無任何更改操作一秒後進行儲存

函數防抖的實作

function debounce(func,delay){
           let time;
           return function(){
               clearTimeout(time);
              time =  setTimeout(()=>{
                func.apply(this,arguments);
              },delay)
           }
       }
       box.onmousemove = debounce(function(e){
           box.innerHTML = `${e.clientX},${e.clientY}`
       },1000)

           

函數節流

節流的意思是讓函數有節制地執行，而不是毫無節制的觸發一次就執行一次。

什麼叫有節制呢？就是在一段時間内，隻執行一次。

函數節流的場景

• scroll 事件，每隔一秒計算一次位置資訊等

• 浏覽器播放事件，每個一秒計算一次進度資訊等

input 框實時搜尋并發送請求展示下拉清單，沒隔一秒發送一次請求 (也可做防抖)

函數節流的實作

<script type="text/javascript">
        const box = document.getElementById("box");
       
       function throttle(func,delay){
           let run = true;
              return function(){
                  if(!run){ //如果開關關了，直接退出
                      return;
                  }
                  run = false;//持續觸發的話，run一直是false，就會提供留在上面的判斷中
                
                  setTimeout(()=>{
                    func.apply(this,arguments);
                    run = true//定時器到時間之後，會把開關打開，我們的函數就會被執行
                },delay)
              }
       }
 
        box.onmousemove = throttle(function(e){
            box.innerHTML = `${e.clientX},${e.clientY}`
        },1000)
 
     </script>