节流和防抖

最新推荐文章于 2024-08-21 15:43:48 发布

Shencl_harsh

最新推荐文章于 2024-08-21 15:43:48 发布

阅读量81

点赞数

分类专栏： js基础文章标签： js

本文链接：https://blog.csdn.net/weixin_45564155/article/details/117187399

版权

js基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文记录了JavaScript中两种性能优化技术——防抖(debounce)和节流(throttle)的实现。防抖函数用于限制函数的执行频率，例如在连续点击按钮时，只在最后一次点击后执行。节流函数则确保函数在一定时间内不会连续执行，常用于窗口滚动事件处理，以防止频繁触发。示例代码展示了如何创建防抖和节流函数，并应用于实际场景。

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

节流和防抖

学习记录

学习记录

// 防抖
const btn = document.getElementById('btn')
// 异步任务
const fn = (event) => {
  return setTimeout(() => {
    console.log('btn clicked...', event.target);
  }, 500);
}

const debounce = (func) => {
  let timer;
  return (event) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = func(event)
  }
}
btn.onclick = debounce(fn);

// 节流
const fn2 = (event) => {
  console.log(event);
}

const throttle = (func, delay) => {
  let timer
  return (event) => {
    if (timer) return;
    timer = setTimeout(() => {
      func(event)
      clearTimeout(timer)
      timer = null
    }, delay);
  }
}

window.onscroll = throttle(fn2, 1000)