节流防抖函数

最新推荐文章于 2022-11-11 13:04:17 发布

景尘

最新推荐文章于 2022-11-11 13:04:17 发布

阅读量266

点赞数 1

文章标签：防抖节流

本文链接：https://blog.youkuaiyun.com/lbPro0412/article/details/114685858

版权

69 篇文章 ¥99.90 ¥299.90

订阅专栏

本文探讨了节流和防抖函数的概念，介绍了如何将两者合二为一，创建一个加强版的节流函数，该函数在等待时间内允许重新生成定时器，且一旦等待时间结束，确保对用户进行响应。同时，文章讲解了节流和防抖的基本实现策略，并提到了带有初次执行功能的防抖函数实现。

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

函数节流指的是某个函数在一定时间间隔内（例如每3秒）只执行一次，在这3秒内无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来产生的函数调用请求，以此类推。

实现方案有以下两种

第一种是用时间戳来判断是否已到执行时间，记录上次执行的时间戳，然后每次触发事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经达到时间差（Xms），如果是则执行，并更新上次执行的时间戳，如此循环。
第二种方法是使用定时器，比如当 scroll 事件刚触发时，打印一个 hello world，然后设置个 1000ms 的定时器，此后每次触发 scroll 事件触发回调，如果已经存在定时器，则回调不执行方法，直到定时器触发，handler 被清除，然后重新设置定时器。

// fn 是需要执行的函数
// wait 是时间间隔
const throttle = (fn, wait = 50) => {
  // 上一次执行 fn 的时间

了解本专栏