JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念
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;
- //转载至 http://www.css88.com/archives/6589
JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念相关推荐
- 如何在JavaScript中使用apply(?),call(?)和bind(➰)方法
by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? 如何在JavaScript中使用apply(?),call(?)和bind(➰)方法 (How to use ...
- javascript中的对象之间继承关系
相信每个学习过其他语言的同学再去学习JavaScript时就会感觉到诸多的不适应,这真是一个颠覆我们以前的编程思想的一门语言,先不要说它的各种数据类型以及表达式的不同了,最让我们头疼,恐怕就是面向对象 ...
- JavaScript中的定时器详解
前言 JavaScript 中有两种定时器: setTimeout():指定时间后执行一段代码(延迟执行). setInterval():每隔一段时间执行一段代码(间隔执行). 下面单独对两种计时器进 ...
- 【译】JavaScript 中的节流(throttle)和防抖(debounce)
目录 JavaScript中的节流和防抖 节流和防抖的区别 使用场景 实现节流和防抖 防抖 节流 JavaScript中的节流和防抖 你是否因过度调用函数而影响性能呢? 解决性能问题是在 JavaSc ...
- keras 香草编码器_完善纯香草javascript中的拖放
keras 香草编码器 Drag-and-drop functionality is the bread and butter of a modern web UX. It's an aspect o ...
- throttle/debounce应用及原理
文章目录 基础应用 "时间"防抖 "空间"防抖 进阶应用 throttleFirst throttleLast throttleLatest debounce ...
- JavaScript中的一等公民: 函数(Function)
1. 函数的基本使用 使用函数声明或者函数表达式创建一个函数 foo(); //foo bar(); //Uncaught ReferenceError: Cannot access 'bar' be ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- JavaScript中,this的绑定规则
对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点. 比如下面的代码,this 指向就有三种方式. 在<你不知道的 JavaScript>一书中,我总算比较清 ...
最新文章
- grep, sed, awk
- Python 下载的九种方法
- Python——pip批量安装和卸载package
- 爱拉托逊斯方法以及素数判断
- luogu P2241 统计方形
- 元件原理图旋转45度_大口径大曲率半径光学元件的高精度检测
- initramfs 工作原理
- python制作会动的表情包_Python自动生成表情包,python在手,从此斗图无敌手
- Git工作笔记001---Windows下安装Git Core以及TortoiseGit安装与配置
- 事件库之Redis自己的事件模型-ae
- 组策略下发URL地址时的问题
- 编译OpenJDK12:globalDefinitions_visCPP.hpp(46): fatal error C1083:inttypes.h No such file or directory
- php中in array函数_PHP函数in_array()使用详解
- 史上最全介绍--新能源汽车整车控制器VCU开发流程功能概述
- BZZ节点如何成为有效节点,BZZ节点优势
- html所有的标签,html所有标签超详细概述
- 【一文带你读懂机器学习】线性回归原理
- excel表格汇总数据
- android MediaCodec 音频编解码的实现——转码
- 盘点HR日常工作数据计算大全