防抖和节流

最新推荐文章于 2024-10-21 15:12:29 发布

原创最新推荐文章于 2024-10-21 15:12:29 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了前端开发中节流和防抖两种重要的优化技术，详细解释了它们的作用原理及应用场景，并提供了具体的代码示例。

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

作用意义

节流和防抖作为页面性能中的一种优化策略，可以降低回调函数的执行顺序，节省优化资源，有效减少浏览器引擎的损耗，防止出现页面的堵塞卡顿现象。

定义

节流：简单的说，就是限制一个动作在一段时间内只能执行一次。
防抖：简单地说，就是一个动作连续触发，只执行最后一次。

应用场景：

节流：滚动加载，加载更多或者滚到底部监听，搜索框，搜索联想功能

防抖：搜索框搜说输入，只需用户最后一次输完，再发送请求、手机号、邮箱验证输入

实现思路：

二者都可以通过定时器 setTimeout 以及清除定时器 clearTimeout 的方法去实现。
利用 timer 记录是否存在定时器，为了防止环境污染，在这里使用了闭包。
节流：如果存在，就不再执行函数，等到第一个计时器回调函数结束后重置 timer 为 null。
防抖：如果存在，直接清除上一次的定时器，再重新开启一个新的定时器。

代码实例：

节流：

HTML代码

<button class="btn2">节流测试</button>

JS代码

// 定义一个节流使用的函数
function fn2(a, b, c) {
  console.log(a, b, c);
}
// 节流简单实现(闭包)
function throttle(fn, delay) {
  // 定义一个记录定时器的变量
  let timer;
  // 返回一个函数
  return function () {
    // 判断是否有定时器，如果有就退出函数
    if (timer) return;
    // 记录定时器
    timer = setTimeout(() => {
      // 执行我们想去利用节流实现的函数
      fn.apply(this, arguments);
      // 计时器回调执行完毕后重置timer
      timer = null;
    }, delay);
  };
}
let l2 = throttle(fn2, 1000);
document.querySelector(".btn2").addEventListener("click", () => {
  l2("我是节流", 19, "利用arguments传值");
});

防抖：

HTML代码

<button class="btn">防抖测试</button>

JS代码

// 定义防抖使用的函数
function fn1(name, age, word) {
  console.log("我是节流处理函数", age, name, word);
}
// 防抖简单实现(闭包)
let debounce = (fn, delay) => {
  // 定义一个记录定时器的变量
  let timer;
  // 返回函数
  return function () {
    console.log(timer);
    //如果检测到有定时器存在就直接清除
    if (timer) clearTimeout(timer);
    // 记录定时器
    timer = setTimeout(() => {
      // 执行我们想去利用防抖实现的函数
      fn.apply(this, arguments);
    }, delay);
  };
};
let l1 = debounce(fn1, 3000);
document.querySelector(".btn").addEventListener("click", () => {
  l1("zs", 19, "真的可以这么穿值");
});