JS 防抖和节流超详细解读附带源码解析

最新推荐文章于 2024-02-01 09:35:36 发布

LifeFuture1994

最新推荐文章于 2024-02-01 09:35:36 发布

阅读量301

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Future1994/article/details/109107646

版权

本文深入探讨JavaScript中的防抖和节流技术，详细解释了两种实现方式，并附带源码解析。防抖技术在事件触发后等待一段时间，若期间再次触发则重新计时；节流技术则保证在一段时间内只执行一次函数，分为立即执行和延迟执行两种模式。针对各自缺点，文章提出了解决方案。

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

防抖（2种）：

在触犯事件后，隔一段时间才会触发执行函数，如果在这段时间内再次触发了事件，呢么重新开始计时。

1种：触发事件后，隔一段时间才能输出执行函数

2种：触发事件立即执行，之后只能等不在触发事件，一段时间后才能执行。

节流（2种）：

对于连续的触发事件，在一段时间内执行一次函数

1种：不会立即执行。等一段时间，执行一次函数

2种：立即执行，之后也是等一段时间执行一次函数。

但是这期间都要连续触发事件，而且第一种定时器节流函数很可能发生事件停止但是等一段时间之后才发生执行函数的情况，这可能是由于wait设置定时器的缘故，如果采用时间戳，则会立即停止，不会触发。

所以节流的两种方式都要缺点，第一种无法立即执行，而且不能在事件完成之后确保一定触发一次函数。第二种事件停止就不会再次触发函数了，所以需要中和上述两种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&

关注

专栏目录

JS 防抖和节流 超详细解读 附带源码解析