函数防抖debounce方法 / 节流throttle方法

最新推荐文章于 2026-04-11 09:14:31 发布

原创最新推荐文章于 2026-04-11 09:14:31 发布 · 673 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文深入探讨了JavaScript中防抖(debounce)与节流(throttle)的技术细节，通过具体示例展示了如何在窗口大小调整和滚动事件中应用这两种方法，有效控制事件处理函数的执行频率，提升用户体验。

防抖debounce：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次。

function debounce(method, context) {
  clearTimeout(method.tId)
  method.tId = setTimeout(function() {
    method.call(context)
  }, 100)
}

function resize() {
  console.log("xxx")
}

window.onresize = function() {
  debounce(resize)
}

节流throttle：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

const throttle = function(func, delay) {
  var prev = Date.now();
  return function() {
    var now = Date.now();
	if(now - prev >= delay) {
	  func.apply(this);
	  prev = Date.now();
    }
  }
}

function handle() {
  console.log('xxx');
}

window.addEventListener('scroll', throttle(handle, 5000));