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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
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编写一个简单的路由类
2011/04/13 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
js实现随机抽奖
2020/03/19 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Python自带的IDE在哪里
2020/07/01 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
优秀党员获奖感言
2014/02/18 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
紧急通知
2015/04/17 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书