怎么理解javascript中防抖和節(jié)流

本篇內容介紹了“怎么理解javascript中防抖和節(jié)流”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在javascript中，防抖是指觸發(fā)高頻事件后n秒內函數(shù)只會執(zhí)行一次，如果n秒內高頻事件再次被觸發(fā)，則重新計算時間；節(jié)流是指當持續(xù)觸發(fā)事件時，保證一定時間段內只調用一次事件處理函數(shù)。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

一、防抖

觸發(fā)高頻事件后n秒內函數(shù)只會執(zhí)行一次，如果n秒內高頻事件再次被觸發(fā)，則重新計算時間

• 思路：
  動作綁定事件，動作發(fā)生后一定時間后觸發(fā)事件，在這段時間內，如果該動作又發(fā)生，則重新等待一定時間再觸發(fā)事件。

function debounce(fn) {
      let timeout = null; // 創(chuàng)建一個標記用來存放定時器的返回值
      return function () {
        clearTimeout(timeout);
         // 每當用戶輸入的時候把前一個 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又創(chuàng)建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內
        // 如果還有字符輸入的話，就不會執(zhí)行 fn 函數(shù)
          fn.apply(this, arguments);
          //因為sayHi函數(shù)是在全局中運行，this默認指向了window
          //所以要用apply將inp的this傳入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

舉個例子，假如你有一個需求是用戶在input框中輸入一串字符后，自動發(fā)一個ajax請求，如果不做防抖，則用戶每次改變字符串(刪掉字符或輸入新字符)都會發(fā)送一次請求，但是如果做防抖處理，當用戶輸入一個字符后，過了0.5秒也沒有改變字符串（這大概率表示用戶已經(jīng)完成字符串輸入），則發(fā)送請求，如果在0.5秒內改變了字符串（這大概率表示當前字符串不是用戶要輸入的最終字符串），則暫不發(fā)送請求，繼續(xù)重新計算0.5秒，直到用戶停頓超過了0.5秒，再發(fā)送請求。

二、節(jié)流

當持續(xù)觸發(fā)事件時，保證一定時間段內只調用一次事件處理函數(shù)。所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率

• 思路：
  動作綁定事件，動作發(fā)生后一段時間后觸發(fā)事件，在這段時間內，如果動作又發(fā)生，則無視該動作，直到事件執(zhí)行完后，才能重新觸發(fā)。

function throttle(fn) {
      let canRun = true; // 通過閉包保存一個標記
      return function () {
        if (!canRun) return; // 在函數(shù)開頭判斷標記是否為true，不為true則return
        canRun = false; // 立即設置為false
        setTimeout(() => { // 將外部傳入的函數(shù)的執(zhí)行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout執(zhí)行完畢后再把標記設置為true(關鍵)表示可以執(zhí)行下一次
          //循環(huán)了。當定時器沒有執(zhí)行的時候標記永遠是false，在開頭被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

三、結合應用場景

debounce(防抖)

• search搜索聯(lián)想，用戶在不斷輸入值時，用防抖來節(jié)約請求資源。

• window觸發(fā)resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發(fā)這個事件，用防抖來讓其只觸發(fā)一次

. throttle(節(jié)流)

• 鼠標不斷點擊觸發(fā)，mousedown(單位時間內只觸發(fā)一次)

• 監(jiān)聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷

“怎么理解javascript中防抖和節(jié)流”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！