手写防抖、节流函数

最新推荐文章于 2024-08-25 13:14:30 发布

只会cv的小前端

最新推荐文章于 2024-08-25 13:14:30 发布

阅读量313

点赞数

分类专栏： JavaScript 文章标签： js

原文链接：https://blog.csdn.net/z591102/article/details/117523721?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162691830316780265443425%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162691830316780265443425&biz_id=0&utm_medium

版权

JavaScript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中两种重要的性能优化技术——防抖和节流。防抖技术确保在短时间内频繁触发同一事件时，只执行最后一次函数调用，而节流则限制了函数执行的频率，每隔一定时间执行一次。通过示例代码，展示了如何实现防抖和节流函数，并应用于窗口滚动事件监听，以减少不必要的计算和提高页面性能。

摘要由CSDN通过智能技术生成

防抖：短时间大量触发同一事件，只执行一次函数，实现延迟执行。

节流：节流即每隔一个时间间隔，执行一次任务（多次触发只执行一次）。

防抖：

// 防抖
function debounce(fn, delay = 300) {
  //默认300毫秒
  let timer;
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args); // 改变this指向为调用debounce所指的对象
    }, delay);
  };
}
 
window.addEventListener(
  "scroll",
  debounce(() => {
    console.log(111);
  }, 1000)

节流：


// 节流
// 设置一个标志
function throttle(fn, delay) {
  let flag = true;
  return () => {
    if (!flag) return;
    flag = false;
    timer = setTimeout(() => {
      fn();
      flag = true;
    }, delay);
  };
}
 
window.addEventListener(
  "scroll",
  throttle(() => {
    console.log(111);
  }, 1000)
);