JavaScript中定时控制Throttle、Debounce和Immediate详解


Posted in Javascript onNovember 17, 2016

前言

我们称这些行为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;

总结

以上就是这篇文章的全部内容了,在这篇文章中,我们已经探索了用作定时函数的最常见的技术。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 一道字符串分解的题目
Aug 03 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 #Javascript
leaflet的开发入门教程
Nov 17 #Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 #Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 #Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 #Javascript
jQuery 插件封装的方法
Nov 16 #Javascript
Node.js 数据加密传输浅析
Nov 16 #Javascript
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
表单内同名元素的控制
2006/11/22 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
详解C++编程中一元运算符的重载
2016/01/19 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
执行总经理岗位职责
2014/02/03 职场文书
管理工程专业求职信
2014/08/10 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
红旗渠导游词
2015/02/09 职场文书
三下乡个人总结
2015/03/04 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
python利用while求100内的整数和方式
2021/11/07 Python