js中的简单节流阀
我正在寻找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和可能的代码简化的建议
以上是 js中的简单节流阀 的全部内容, 来源链接: utcz.com/qa/435585.html