防抖和节流

JavaScript函数优化：节流与防抖技术解析

最新推荐文章于 2025-04-02 11:15:13 发布

原创最新推荐文章于 2025-04-02 11:15:13 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#防抖 #节流

本文深入探讨了JavaScript中两种重要的函数优化技术——节流和防抖。节流通过限制函数的执行频率，确保在特定时间间隔内只执行一次，防止频繁触发导致的性能问题。防抖则通过取消前一次未执行的定时任务，确保在最后一次操作后才执行函数，优化用户体验。文中提供了多种实现节流和防抖的函数示例，包括基础版本和加强版节流，以适应不同场景的需求。这两种技术常用于事件监听、滚动优化、输入延迟处理等场景。

节流

核心思想: 如果在定时器的时间范围内再次触发，则不予理睬，等当前定时器完成，才能启动下一个定时器任务。
比如：等公交，公交不到点，再怎么嚷嚷都不行。
闭包
function throttle(fn, interval) {
  let flag = true;
  return function(...args) {
    let context = this;
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(context, args);
      flag = true;
    }, interval);
  };
};
const throttle = function(fn, interval) {
  let last = 0;
  return function (...args) {
    let context = this;
    let now = +new Date();
    // 还没到时间
    if(now - last < interval) return;
    last = now;
    fn.apply(this, args)
  }
}

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

防抖

核心思想: 每次事件触发则删除原来的定时器，建立新的定时器。以最后一次触发为准
闭包
function debounce(fn, delay) {
  let timer = null;
  return function (...args) { // ...args其实就是把调用的参数解构
    let context = this;
    if(timer) clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args); // apply后面跟的是数组 其实args就是arguments是个数组
    }, delay);
  }
}

function debounce(fn, delay) {
    var timer; // 维护一个 timer
    return function () {
        var _this = this; // 取debounce执行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
        }, delay);
    };
}

加强版节流

防抖有时候触发的太频繁会导致一次响应都没有，我们希望到了固定的时间必须给用户一个响应，事实上很多前端库就是采取了这样的思路。
function throttle(fn, delay) {
  let last = 0, timer = null;
  return function (...args) {
    let context = this;
    let now = new Date();
    if(now - last < delay){
      clearTimeout(timer);
      setTimeout(function() {
        last = now;
        fn.apply(context, args);
      }, delay);
    } else {
      // 这个时候表示时间到了，必须给响应
      last = now;
      fn.apply(context, args);
    }
  }
}