当前位置:网站首页 > 技术博客 > 正文

防抖和节流如何实现



防抖

节流

实现

方法有很多种,以下是两种比较常见的

实现

方式:

1. 使用setTimeout

实现 防抖

节流 防抖

 javascript f unc tion debo unc e(fn, delay) { let timer = null; return f unc tion() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); }; } 

节流

 javascript f unc tion thro ttle (fn, delay) { let timer = null; return f unc tion() { if (!timer) { timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay); } }; } 

2. 使用时间戳

实现 防抖

节流 防抖

 javascript f unc tion debo unc e(fn, delay) { let timer = null; return f unc tion() { const now = +new Date(); if (timer && now - timer < delay) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, arguments); }, delay); }; } 

节流

 javascript f unc tion thro ttle (fn, delay) { let lastTime = 0; return f unc tion() { const now = +new Date(); if (now - lastTime > delay) { fn.apply(this, arguments); lastTime = now; } }; } 

以上两种

实现

方式都可以

实现 防抖

节流

,使用哪种方式取决于个人的喜好和具体应用场景。

版权声明


相关文章:

  • linux md5sum命令2024-12-20 19:01:03
  • 异步fifo实现2024-12-20 19:01:03
  • 协程到底是什么2024-12-20 19:01:03
  • api功能测试2024-12-20 19:01:03
  • 组策略 uac2024-12-20 19:01:03
  • 有没有图片对比相似的软件2024-12-20 19:01:03
  • stat 命令2024-12-20 19:01:03
  • ip命令详解2024-12-20 19:01:03
  • 深入理解计算机系统怎么2024-12-20 19:01:03
  • java 多线程 线程池2024-12-20 19:01:03