對防抖和節流的理解及其應用場景

時間 2020-05-20

標籤節流理解及其應用場景简体版

原文原文鏈接

在開發中，咱們經常會去監聽滾動事件或者用戶輸入框驗證事件，若是事件處理沒有頻率限制，就會加劇瀏覽器的負擔，影響用戶的體驗感，瀏覽器

所以，咱們能夠採起防抖（debounce）和節流（throttle）來處理，減小調用事件的頻率，達到較好的用戶體驗。緩存

防抖（debounce）：閉包

　　在事件被觸發n秒後再執行回調，若是在這n秒內又被觸發，則從新計時，從新出發定時器。

<head>

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

overflow: auto;

}

</style>

</head>

<body>

</div>

</body>

function debounce(fn, wait) { var timeout = null;// 使用閉包，緩存變量

 return function() {
 if(timeout !== null) { console.log('清除定時器啦') clearTimeout(timeout); //清除這個定時器
 } timeout = setTimeout(fn, wait); } } // 處理函數
  function handle() { console.log(Math.random()); } var container = document.getElementById('container') container.addEventListener('scroll', debounce(handle, 1000));

咱們能夠發現，當連續觸發scroll事件，handle函數只會在1秒時間內執行一次，在若是繼續滾動執行，就會清除定時器，從新計時。至關於就是屢次執行，只執行一次。app

節流（throttle）：dom

　　規定在一個單位時間內，只能觸發一次函數。若是這個單位時間內觸發屢次函數，只有一次生效。

var throttle = function(func, delay) { var timer = null; // 使用閉包，緩存變量 var prev = Date.now(); // 最開始進入滾動的時間
    return function() { var context = this;   // this指向window
      var args = arguments; var now = Date.now(); var remain = delay - (now - prev); // 剩餘時間
 clearTimeout(timer); // 若是剩餘時間小於0，就馬上執行
      if (remain <= 0) { func.apply(context, args); prev = Date.now(); } else { timer = setTimeout(func, remain); } } } function handle() { console.log(Math.random()); } var container = document.getElementById('container') container.addEventListener('scroll', throttle(handle, 1000));