js防抖节流

最新推荐文章于 2025-03-27 22:50:01 发布

Empty_love

最新推荐文章于 2025-03-27 22:50:01 发布

阅读量332

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_52326094/article/details/127567623

版权

本文介绍了JavaScript中的防抖和节流技术，这两种技术常用于优化性能，避免在频繁触发事件时浪费资源。防抖确保在最后一次事件触发后才执行函数，而节流则限制函数在特定时间间隔内执行的频率。例如，防抖可以应用于input搜索以减少请求次数，节流适用于限制按钮点击的请求频率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖/节流

简单介绍

防抖：指定时间内频繁触发一个事件，以最后一次触发为准
节流：指定时间内频繁触发一个事件，只会触发一次

应用场景有很多比如:
防抖是： input搜索，用户在不断输入内容的时候，用防抖来减少请求的次数并且节约请求资源
节流：场景普遍就是按钮点击，一秒点击 10 下会发起 10 次请求，节流以后 1 秒点再多次，都只会触发一次

// 防抖
// fn 需要防抖的函数，delay 为定时器时间
function debounce(fn,delay){
    let timer =  null  // 用于保存定时器
    return function () { 
        // 如果timer存在 就清除定时器，重新计时
        if(timer){
            clearTimeout(timeout);
        }
        //设置定时器，规定时间后执行真实要执行的函数
        timeout = setTimeout(() => {
           fn.apply(this);
        }, delay);
    }
}

// 节流
function throttle(fn) {
  let timer = null; // 首先设定一个变量，没有执行定时器时,默认为 null
  return function () {
    if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行
    timer = setTimeout(() => {
      fn.apply(this, arguments);
       // 最后在setTimeout执行完毕后再把标记设置为true(关键)
       // 表示可以执行下一次循环了。
      timer = null;
    }, 1000);
  };
}