javascript中什麼是防手震和節流

在javascript中，防手震是指觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再觸發，重新計算時間；節流是指當持續觸發事件時，保證在一定時間內只呼叫一次事件處理函數。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

一、防手震

觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再觸發，則重新計算時間

• 想法：
  動作綁定事件，動作發生後一定時間後觸發事件，在這段時間內，如果該動作又發生，則重新等待一定時間再觸發事件。

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
        // 如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
          //因为sayHi函数是在全局中运行，this默认指向了window
          //所以要用apply将inp的this传入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

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

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

二、節流

當持續觸發事件時，保證在一定時間內只呼叫一次事件處理函數。所以節流會稀釋函數的執行頻率

• 想法：
  動作綁定事件，動作發生後一段時間後觸發事件，在這段時間內，如果動作又發生，則無視該動作，直到事件執行完後，才能重新觸發。

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
          //循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

三、結合應用場景

debounce(防震)

• debounce(防震)

## search搜尋聯想，使用者在不斷輸入值時，用防手震來節約請求資源。

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

滑鼠不斷點擊觸發，mousedown(單位時間內只觸發一次)

###監聽滾動事件，例如是否滑到底部自動加載更多，用throttle來判斷#############【推薦學習：###javascript高級教程###】###

以上是javascript中什麼是防手震和節流的詳細內容。更多資訊請關注PHP中文網其他相關文章！