JavaScript中定时控制Throttle、Debounce和Immediate详解
前言
我们称这些行为events(事件)，和响应callbacks(回调)。连续的事件流被称为event stream（事件流）。这些行为发生的速度不是我们能手动控制的。但是我们可以控制何时和如何激活正确的响应。有一些技术为我们提供精确的控制。
Throttle
在现代浏览器中，帧速率为60fps是流畅性能的目标，给定我们16.7ms的时间预算用于响应一些事件所有需要的更新。这样可以推断，如果每秒发生n个事件并且回调执行，需要t秒的时间，为了流畅运行，
1 / n >= t
如果t以毫秒为单位，
1000 / n >= t
如果你曾经使用mousemove事件，你会知道产生mousemove事件的数量每秒可以超过60次。如果我们的回调需要超过16.7ms，那就开始凌乱了。
var then = 0;
function log() {
var now = Date.now();
if (1000 / (now - then) > 60) {
console.log('It\'s over 9000!!!');
}
then = now;
}
window.onmousemove = log;
实现
Throttle 允许我们限制我们激活响应的数量。我们可以限制每秒回调的数量。反过来，也就是说在激活下一个回调之前要等待多少时间;
var delta = 1000;
var then = 0;
function log() {
console.log('foo');
}
function throttledLog() {
var now = Date.now();
if (now - then >= delta) {
log();
then = now;
}
};
window.onmousemove = throttledLog;
我们可以用 fps替换delta，并推断出不同的代码。
var fps = 60;
...
function throttledLog() {
var now = Date.now();
if (1000 / (now - then) < = fps) {
log();
then = now;
}
};
window.onmousemove = throttledLog;
我们也可以通过使用setTimeout来实现相同的结果。 但是，不是检查时间差，而是检查状态变化。
第一次，我们可以安全地激活回调。一旦完成，只有在等待 delta 时间之后才能再次激活回调。
var delta = 1000;
var safe = true;
function log() {
console.log('foo');
}
function throttledLog() {
if (safe) {
log();
safe = false;
setTimeout(function() {
safe = true;
}, delta);
}
};
window.onmousemove = throttledLog;
Debounce
这个术语-去抖动 来自电子学的领域，手动开关输入的信号被发送到数字电路中。在电子学中，当你按一个物理按钮一次，数字电路可能读到多个按压，因为按钮的物理属性（金属触点，弹簧，磨损件等）。
去抖动意味着采集到的所有这些波动的信号，并把它们当作一个。
例子
一个简单的例子已经存在于JS中：keydown vs keyup。假设您正在处理一个项目，并且需要输入内容。但是你想要每次敲击键盘得到一个字符。输入时，如果长按一个键，keydown事件将连续被触发，但是 keyup 事件只有在按键被释放时才会触发。
window.onkeyup = function() {
console.log('onkeyup');
}
window.onkeydown = function() {
console.log('onkeydown');
}
这种行为上的差异对于确定输入是否已完成是有用的。在示例场景中，它是你将使用的keyup事件。在某种程度上，我们可以说keydown 是原始输入，keyup 是去抖动输入。
实现
当事件发生时，我们不会立即激活回调。相反，我们等待一定的时间并检查相同的事件是否再次触发。如果是，我们重置定时器，并再次等待。如果在等待期间没有发生相同的事件，我们就立即激活回调。
var delta = 1000;
var timeoutID = null;
function log() {
console.log('foo');
}
function debouncedLog() {
clearTimeout(timeoutID); // reset timer
timeoutID = setTimeout(function() {
// wait for some time
// and check if event happens again
log();
}, delta);
};
window.onkeydown = debouncedLog;
Immediate
Immediate是Debounce的精确版本。比起 Debounce 的 等待后续事件触发，然后再激活回调，Immediate 是 立即激活回调，然后等待后续事件在一定时间内触发。
实现
就像Throttle的情况一样，我们需要一个状态变量来检查是否应该激活我们的回调。我们在Debounce不需要一个，因为timeoutID隐式管理这部分。
var delta = 1000;
var timeoutID = null;
var safe = true;
function log() {
console.log('foo');
}
function immediatedLog() {
if (safe) {
log();
safe = false;
}
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
safe = true;
}, delta);
};
window.onkeydown = immediatedLog;
总结
以上就是这篇文章的全部内容了，在这篇文章中，我们已经探索了用作定时函数的最常见的技术。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
今天小编就为大家分享一篇js jquery 获取某一元素到浏览器顶端的距离实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Bootstrap select实现下拉框多选效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JavaScript箭头函数中的this详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了js中关于require与import的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了JavaScript前端如何实现截屏功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了javascript文件加载管理简单实现方法,可实现顺序加载所有js文件的功能,非常简单实用,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了微信小程序 动态绑定数据及动态事件处理的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了js实现磁性吸附的示例，帮助大家更好的制作js特效，美化自己的网页，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了javascript匿名函数,以实例形式详细分析了javascript匿名函数的定义、用法及注意事项,具有很好的学习借鉴价值,需要的朋友可以参考下2014-11-11
无聊用javascript写了个随机产生福利彩票双色球7个数字的号码其中红色球不会重复,喜欢的可以下来看看,有意见的可以说说2015-05-05
最新评论