在 web 前端的开发中，常常需要处理用户的事件，比如滚动到底部加载更多数据、输入框实时搜索等，这些操作会引发频繁地触发回调函数，可能会导致页面出现卡顿或者频繁请求网络资源。为了解决这个问题，我们可以使用防抖和节流技术。
什么是防抖？
防抖的作用是当一个事件被触发时，我们不立即执行回调函数，而是等待一段时间再执行。如果在这段时间内该事件被触发了多次，那么只有最后一次会被执行。
防抖的实现方式有两种：
1. 定时器实现方式
-------- ------------------ ------ -
--- ----- - -----
------ -------- --------- -
----- ------- - -----
--------------------
----- - ------------- -- -
----------------------- ------
-- -------
--
-
----- ------------ - -- -- -
--------------------- ---------
--
--------------------------------- ---------------------- ------在这个例子中，debounce 函数接收两个参数，第一个参数是回调函数，第二个参数是等待时间。它返回了一个函数，这个函数作为事件监听的回调函数。
在执行回调函数之前，我们使用了 clearTimeout 清除了之前可能存在的定时器。接着，我们使用 setTimeout 创建一个新的定时器，等待一段时间后执行回调函数。
2. 时间戳实现方式
-------- ------------------ ------ -
--- ----- - -----
--- ---- - --
------ -------- --------- -
----- ------- - -----
----- --- - --- -----------------
-- ---- - ---- - ------ -
--------------------
----- - ------------- -- -
----------------------- ------
-- -------
- ---- -
---- - ----
----------------------- ------
-
--
-
----- ------------ - -- -- -
--------------------- ---------
--
--------------------------------- ---------------------- ------在这个例子中，我们使用了一个变量 last 来记录上一次事件触发的时间戳。在每次事件触发时，我们计算当前时间戳与 last 的差值，如果小于等待时间，那么我们清除之前的定时器，创建新的定时器等待执行；否则，我们立即执行回调函数并更新时间戳。
什么是节流？
节流的作用是当一个事件被触发时，我们每隔一段时间执行一次回调函数。如果在这段时间内事件被触发多次，那么只有第一次会被执行。
节流的实现方式有两种：
1. 定时器实现方式
-------- ------------------ ------ -
--- ----- - -----
------ -------- --------- -
----- ------- - -----
-- -------- -
----- - ------------- -- -
----------------------- ------
----- - -----
-- -------
-
--
-
----- ------------ - -- -- -
--------------------- ---------
--
--------------------------------- ---------------------- ------在这个例子中，throttle 函数接收两个参数，第一个参数是回调函数，第二个参数是间隔时间。
在实际执行回调函数之前，我们先判断是否存在定时器，如果不存在，则创建一个定时器并执行回调函数。在回调函数执行完毕之后，我们清除定时器，等待下一次事件触发。
2. 时间戳实现方式
-------- ------------------ ------ -
--- ---- - --
------ -------- --------- -
----- ------- - -----
----- --- - --- -----------------
-- ---- - ---- - ------ -
---- - ----
----------------------- ------
-
--
-
----- ------------ - -- -- -
--------------------- ---------
--
--------------------------------- ---------------------- ------在这个例子中，我们使用了一个变量 last 来记录上一次回调函数执行的时间戳。在每次事件触发时，我们计算当前时间戳与 last 的差值，如果大于等待时间，那么我们立即执行回调函数并更新时间戳。
使用场景
防抖和节流通常用于处理用户输入、滚动事件等频繁触发的事件。在以下场景中，它们能够提高页面的性能和用户体验：
- 输入框实时搜索
- 滚动到底部加载更多数据
- 鼠标移动事件
- 窗口大小变化事件
总结
防抖和节流是前端开发中常用的优化技术，它们能够提高页面性能和用户体验。防抖通常用于处理连续多次触发的事件，节流通常用于处理间隔性的触发事件。
在实际开发中，可以根据具体的场景选择合适的实现方式。定时器方式是比较通用的，适用于大部分场景。时间戳方式更加精确，适用于需要控制节奏的场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664863d5d3423812e4701188