防抖（debounce）&节流（throttle）总结

最新推荐文章于 2025-03-15 15:47:09 发布

原创

最新推荐文章于 2025-03-15 15:47:09 发布 · 277 阅读

标签

#javascript

收录于

本文总结了JavaScript中的防抖（debounce）和节流（throttle）技术，阐述了它们的原理、应用场景及实现方法。防抖技术常用于scroll事件、搜索查询和表单验证等场景，确保在一段时间无操作后执行。节流则适用于DOM拖拽、射击游戏和搜索联想等，确保单位时间内只执行一次。两者都能降低回调执行频率，节省资源，但防抖强调最后执行，节流注重定期执行。

防抖

原理

事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。也就是说，在这个时间内，无论你怎么触发事件，我都不会执行，只有这段时间无操作后才会执行。

应用场景

scroll事件的滚动触发
搜索框输入查询（keyup事件）
表单验证
按钮提交事件
浏览器窗口缩放（resize事件）

实现&取消防抖

function debounce(func, wait, immediate) {
  let timeout, result;

  // 检查func是否为函数
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  }

  // wait如果忘记设置,,默认为0
  wait = wait || 0;
  var debounced = function () {
    // console.log(this);  //=>从中可以测试出this指向的container
    //保存this
    let _this = this;
    // 解决前面的event指向问题
    let args = arguments;
    // 清空上从定时器
    if (timeout) clearTimeout(timeout);


    if (immediate) {
      let callNow = !timeout;
      timeout = setTimeout(() => {
        timeout = null;
      }, wait);
      if (callNow) result = func.apply(_this, arg