JavaScript 中的简单节流
JavaScript 提供了各种用于节流功能的工具,包括 lodash 和 underscore。然而,对于这些库可能过多的情况,自定义节流实现是可取的。
现有节流功能和挑战
提供的节流功能是功能性的,但是它提出了一个问题。节流期结束后,它最后一次执行该函数。在该函数不应多次触发的情况下,这可能会导致出现不需要的行为。
改进的节流函数
要解决此问题,请考虑以下增强的节流函数:消除节流周期后的最终执行:
function throttle(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : Date.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = Date.now(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; };
此更新的函数提供了一个可配置的节流机制,带有用于前沿和后沿触发的可选参数。
简化的节流功能
如果不需要可定制性,更简单的节流函数如下:
function throttle (callback, limit) { var waiting = false; return function () { if (!waiting) { callback.apply(this, arguments); waiting = true; setTimeout(function () { waiting = false; }, limit); } } }
这个不可配置的函数将目标函数节流到指定的时间间隔,而不需要复杂的选项.
以上是**为什么简单的JavaScript节流函数会消除节流期后的最终执行?**的详细内容。更多信息请关注PHP中文网其他相关文章!