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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
javascript 数组的方法集合
Jun 05 Javascript
Javascript typeof 用法
Dec 28 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
教你如何使用php session
2013/10/28 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python解析基于xml格式的日志文件
2017/02/25 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python简单操作excle的方法
2018/09/12 Python
使用Python处理BAM的方法
2018/09/28 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
效能监察建议书
2014/05/19 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
论语读书笔记
2015/06/26 职场文书
清明扫墓感想
2015/08/11 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL