在前端开发中，我们通常需要处理一些频繁触发的事件，例如窗口滚动，键盘输入等。这时，函数节流和函数防抖就显得尤为重要。它们可以帮助我们优化性能并避免过度执行代码。
函数节流
函数节流指的是在一定时间间隔内，不管事件触发了多少次，只执行一次函数。通过设置定时器来实现，在定时器结束前再次触发事件时，则清除定时器重新计时。这样做可以减少函数执行的次数，提升性能。
下面是一个简单的例子：
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
------ -------- --------- -
-- -------- -
----- - ------------- -- -
-------------- ------
----- - -----
-- -------
-
--
-
--------------------------------- ----------- -- -
-- ----
-- -------上述例子中，throttle函数接受两个参数：第一个是待执行的函数，第二个是时间间隔。使用setTimeout来实现函数的延迟执行。
函数防抖
函数防抖指的是在一定时间内，只执行最后一次触发的事件。如果在这段时间内又有事件触发，就重新计时。通过设置定时器来实现，每次触发事件都清除上一次的定时器并重新设置定时器。这样做可以更好地应对频繁的事件触发，避免多次执行函数。
下面是一个简单的例子：
-- -------------------- ---- -------
-------- ------------ ------ -
--- ----- - -----
------ -------- --------- -
-- ------- -
--------------------
-
----- - ------------- -- -
-------------- ------
----- - -----
-- -------
--
-
--------------------------------- ----------- -- -
-- ----
-- -------上述例子中，debounce函数接受两个参数：第一个是待执行的函数，第二个是等待时间。使用clearTimeout来清除上一次的计时器，并使用setTimeout重新设置定时器。
区别与学习指导
函数节流和函数防抖有着明显的区别：
- 函数节流是在一定时间间隔内只执行一次，减少函数执行次数。
- 函数防抖是在一定时间内只执行最后一次，避免过度执行函数。
在实际开发中，我们可以根据需要选择使用不同的方法进行优化。如果需要在用户频繁触发事件时及时更新UI，可以使用函数节流；如果需要响应用户最后一次操作，可以使用函数防抖。
总之，在处理频繁触发事件时，函数节流和函数防抖是非常有用的技术，可以提高应用程序的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2111