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

回到顶部