在前端开发中，我们经常需要处理一些高频率的事件，如窗口滚动、鼠标移动等。如果我们每次都直接执行函数，会导致性能问题和不必要的计算浪费。此时，我们可以使用函数节流来解决这个问题。
什么是函数节流？
函数节流（Throttling）是指在一段时间内只允许函数执行一次。也就是说，在这段时间过去之前，无论触发多少次函数，都只执行一次。通过函数节流，我们可以控制函数的执行频率。
函数节流的作用
函数节流的主要作用是优化性能。当页面上有很多高频率事件需要处理时，如果每次都直接执行函数，会导致页面卡顿或其他性能问题。通过函数节流，我们可以将高频率事件转化为低频率事件，从而减少函数的执行次数，优化性能。
除此之外，函数节流还可以避免在短时间内重复提交表单或发送网络请求等操作，从而防止出现意外情况。
实现函数节流的方法
实现函数节流的方法有两种：时间戳与定时器。
时间戳方式
时间戳方式是指记录函数上一次执行的时间戳，并在下一次执行函数时，判断当前时间是否大于上一次执行的时间戳加上指定的时间间隔。如果是，则执行函数并更新时间戳；否则，不执行函数。
下面是一个使用时间戳实现函数节流的示例代码：
-- -------------------- ---- ------- -------- ------------ ------ - --- -------- - -- ------ ----------------- - ----- ----------- - ----------- -- ------------ - -------- -- ------ - -------------- ------ -------- - ------------ - - -展开代码
定时器方式
定时器方式是指在函数第一次执行后，延迟指定的时间后再次执行函数。在这个时间内，无论触发多少次函数，都不会执行。当定时器到期后，会清除定时器并执行函数。
下面是一个使用定时器实现函数节流的示例代码：
-- -------------------- ---- ------- -------- ------------ ------ - --- ----- - ----- ------ ----------------- - -- -------- - ----- - ------------- -- - -------------- ------ ----- - ----- -- ------- - - -展开代码
总结
通过函数节流，我们可以控制高频率事件的执行次数，从而优化性能和避免意外情况的出现。实现函数节流的方法有两种：时间戳与定时器。根据具体的场景，我们可以选择适合的方法来实现函数节流。
希望本文对您理解 JavaScript 函数节流有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2279
