前端开发中，我们经常要处理用户频繁触发事件的情况，如滚动、输入等。为了避免事件过度触发导致页面卡顿或异常行为，我们可以采用“节流”和“防抖”两种技术来限制函数的执行次数。
节流（Throttle）
节流是指在一定时间内，只能执行一次函数。比如在滚动页面时，如果每次滚动都触发函数，那么页面会频繁地重绘造成性能问题。我们可以通过节流来限制函数的执行次数，使得函数只有在固定的时间间隔内被调用：
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
------ ---------- -
----- ------- - -----
----- ---- - ----------
-- -------- -
----- - --------------------- -
----------------- ------
----- - -----
-- -------
-
--
-上面的 throttle 函数接收两个参数，分别是函数 fn 和时间间隔 delay。在函数执行时，先保存当前上下文和参数，并判断 timer 是否为空。如果为空，则表示需要执行函数，否则表示函数已经在定时器中设定了执行时间，不需要再次执行。当定时器执行时，清空 timer 并调用传入的函数。
防抖（Debounce）
防抖是指在一定时间内，只有最后一次操作才会触发函数。比如在输入框中，如果每次输入都触发函数，那么在用户快速输入时可能会导致频繁的网络请求或计算，从而影响系统性能。我们可以通过防抖来限制函数的执行次数，使得函数只在最后一次操作后被调用：
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
------ ---------- -
----- ------- - -----
----- ---- - ----------
-- ------- -
--------------------
-
----- - --------------------- -
----------------- ------
-- -------
--
-上面的 debounce 函数也接收两个参数，分别是函数 fn 和时间间隔 delay。当函数执行时，如果 timer 不为空，则清除之前设定的定时器。然后重新设定一个新的定时器，在延迟时间结束后调用传入的函数。
差异及应用场景
虽然节流和防抖都可以限制函数的执行次数，但它们的实现方式不同，因此适用的场景也不同。
- 节流：适合在连续触发事件时，需要稳定、固定间隔触发回调的场景，如滚动加载数据。
- 防抖：适合在连续触发事件时，只需要在最后一次操作后触发回调的场景，如输入框搜索。
示例
下面我们来看一个示例代码，在滚动页面时节流执行函数，在输入框中防抖执行函数：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- --- ----------------
-------
------
---- ---------------
------ ----------- ----------- ----------------------- --
--- ---------------
------
--------
-------- ---------- -
----- ---- - --------------------------------
--- ---- - - -- - - --- ---- -
----- -- - -----------------------------
------------ - ----- --- - ----
---------------------
-
-
----- --------- - -------------------------------------
----- ------ - ----------------------------------
---------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------