我正在寻找JS中的简单节流阀。我知道像lodash和underscore这样的库都有它,但是仅对一个函数来说,包含其中任何一个库都是过大的。
我也在检查jquery是否具有类似的功能-找不到。
我发现一个工作的节流阀,这是代码:
function throttle(fn, threshhold, scope) { threshhold || (threshhold = 250); var last, deferTimer; return function () { var context = scope || this; var now = +new Date, args = arguments; if (last && now < last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } }; }
问题是:在油门时间结束后,它将再次触发该功能。因此,假设我制作了一个在按键时每10秒触发一次的油门如果我按键2次,则在完成10秒后仍会触发第二次按键。我不要这种行为。
我将使用underscore.js或lodash源代码找到该功能的经过良好测试的版本。
这是下划线代码的略微修改版本,用于删除所有对underscore.js的引用:
// Returns a function, that, when invoked, will only be triggered at most once // during a given window of time. Normally, the throttled function will run // as much as it can, without ever going more than once per `wait` duration; // but if you'd like to disable the execution on the leading edge, pass // `{leading: false}`. To disable execution on the trailing edge, ditto. 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; }; };
请注意,如果您不需要强调支持的所有选项,则可以简化此代码。
编辑1:删除了对下划线的另一个引用,即对Zettam的评论
编辑2:在lollzery wowzery的评论中添加了有关lodash和可能的代码简化的建议