简单的油门在js [英] Simple throttle in js
问题描述
我在JS中寻找一个简单的油门。我知道像lodash和下划线这样的库有它,但只有一个函数包含任何这些库都是过度的。
I am looking for a simple throttle in JS. I know libraries like lodash and underscore have it, but only for one function it will be overkill to include any of those libraries.
我还在检查jquery是否有类似的功能 - 找不到。
I was also checking if jquery has a similar function - could not find.
我找到了一个工作油门,这里是代码:
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秒钟完成时触发第二次按键。我不想要这种行为。
The problem with this is: it fires the function once more after the throttle time is complete. So let's assume I made a throttle that fires every 10 seconds on keypress - if I do keypress 2 times, it will still fire the second keypress when 10 seconds are completed. I do not want this behavior.
推荐答案
我会使用 underscore.js 或 lodash 源代码,找到这个函数的经过良好测试的版本。
I would use the underscore.js or lodash source code to find a well tested version of this function.
这是下划线代码的略微修改版本,用于删除对下划线的所有引用。 js本人:
Here is the slightly modified version of the underscore code to remove all references to underscore.js himself:
// 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;
};
};
请注意,如果您不需要所有支持下划线的选项,则可以简化此代码。
Please note that this code can be simplified if you don't need all the options that underscore support.
编辑1:删除了对下划线的另一个引用,thx到Zettam的评论
Edit 1: Removed another reference to underscore, thx to Zettam's comment
编辑2:添加了关于lodash的建议和可能的代码简化,thx to lolzery wowzery的评论
Edit 2: Added suggestion about lodash and possible code simplification, thx to lolzery wowzery's comment
这篇关于简单的油门在js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!