throttle(节流函数) 与 debounce(防抖动函数)理解与实现

我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件)

如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏览器卡顿,用户使用体验差。

或者我们需要对触发的事件延迟执行回调,此时可以借助throttle/debounce函数来实现需求。

 

throttle: 节流函数

  在一个时间段内只执行一次

debounce:防抖函数

  连续触发事件的时候,事件监听函数不会立即执行,而是等我们一段时间内不再触发事件的时候,再执行事件监听函数。

 

throttle函数实现

function throttle (func, wait) {
  var lastTime = 0;
  return function () {
    var time = Date.now();
    if (time - lastTime >= wait) {
      func();
      lastTime = time;
    };
  };
};

// handler 是事件监听函数
var handler = function () {
  console.log('throttle');
};

window.onscroll = throttle(handler, 300);

 




debounce函数实现

function debounce (func, wait) {
  var timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  };
};

// handler 是事件监听函数
var handler = function () {
  console.log('debounce');
};

window.onscroll = debounce(handler, 300);

 



转载于:https://www.cnblogs.com/Mr-Rshare/p/11244228.html

你可能感兴趣的:(throttle(节流函数) 与 debounce(防抖动函数)理解与实现)