当前位置:首页 > 日记 > 正文

在Javascript中,定时控制油门,消抖,立即

在Javascript中,定时控制油门,消抖,立即
前言

我们称这些行为事件(事件),和响应的回调函数(回调)。事件的连续流动称为事件流(事件流)。这些行为的速度没有手动控制,但我们可以控制何时以及如何激活正确的响应,也有一些技术,为我们提供了精确的控制。

节流阀

在现代浏览器,60fps帧率流畅的目标,给我们的16.7ms时间预算来应对所有的更新一些事件需要。可以推断,如果N个事件发生的每一秒,回调执行,以T秒的平稳运行。

1

如果t是毫秒,

1000

如果你使用MouseMove事件,你会知道,MouseMove事件的数量可以超过每秒60次。如果我们需要更多的16.7ms回调,它会开始乱了。
var = 0;

函数日志(){
VAR现在= Date.now();
如果(1000 (现在-那么)> 60){
console.log(这是在9000!!!!);
}
那么现在;
}

window.onmousemove =日志;
实现

节流阀允许我们限制反应我们激活号码。我们可以限制回调每秒数。反过来,也就是说要等到下一个回调是激活了多少时间;
var = 1000;
var = 0;

函数日志(){
console.log('foo);
}

功能throttledlog(){
VAR现在= Date.now();
如果(现在-那么=δ){
(日志);

那么现在;
}
};

window.onmousemove = throttledlog;
我们可以用FPS代替delta,并推导出不同的代码。
fps = 60;

功能throttledlog(){
VAR现在= Date.now();
如果(1000 ((现在-那么)< fps){)
(日志);

那么现在;
}
};

window.onmousemove = throttledlog;
我们还可以通过使用setTimeout实现相同的结果。但是,这是不检查的时间不同,但检查的状态变化。

第一次,我们可以安全地激活回调,一旦完成,回调将在delta时间等待之后重新激活。
var = 1000;
var安全=真;

函数日志(){
console.log('foo);
}

功能throttledlog(){
如果(安全){
(日志);

安全=假;
setTimeout(){()函数(
安全的=真实的;
},delta);
}
};

window.onmousemove = throttledlog;
消抖

术语-从电子领域的抖动,手动开关输入信号被发送到数字电路。在电子产品中,当您按下物理按钮一次,数字电路可以读取多个压力机,因为物理性质的按钮(金属触点,弹簧,磨损部件等)。

抖动指的是收集到的所有信号并作为一个信号。

例子

一个简单的例子已经存在于JS:KeyDown和KeyUp。假设你是一个项目的工作,你需要输入的内容。但你想每次去打击键盘,当输入,如果有键按下,KeyDown事件不断被触发,但KeyUp事件只有当松开按键触发。
window.onkeyup =函数(){
console.log('onkeyup);
}

window.onkeydown =函数(){
console.log('onkeydown);
}
行为差异是确定输入是否已经完成有用。在示例场景中,它是KeyUp事件你要使用。在某种程度上,我们可以说,keydown是原始输入,和KeyUp是抖动的输入。

实现

当事件发生时,我们不会立即激活回调。相反,我们等待一定的时间,并检查是否再次触发同一事件。如果是这样,我们重新设置计时器并再次等待。如果在等待期间没有发生同样的事件,我们会立即激活回调。
var = 1000;
无功timeoutid = null;

函数日志(){
console.log('foo);
}

功能debouncedlog(){
ClearTimeout(timeoutid); / /复位定时器
timeoutid = setTimeout(){()函数(
有一段时间
检查事件是否再次发生
(日志);
},delta);
};

window.onkeydown = debouncedlog;
立即

眼前的是完全版的消抖,等待Debounce的后续事件触发相比,然后激活回调,回调立即立即激活,然后等待后续事件触发在一定时间内。

实现

在节流的情况下,我们需要一个状态变量来检查我们是否应该激活我们的回调。我们不需要在去抖因为timeoutid是这部分的隐。
var = 1000;
无功timeoutid = null;
var安全=真;

函数日志(){
console.log('foo);
}

功能immediatedlog(){
如果(安全){
(日志);
安全=假;
}

ClearTimeout(timeoutid);
timeoutid = setTimeout(){()函数(
安全的=真实的;
},delta);
};

window.onkeydown = immediatedlog;
总结

这就是本文的全部内容。在这篇文章中,我们探索了最常用的计时技术,希望本文的内容能对大家的学习或工作有所帮助。如果有问题,你可以留言。

相关文章

PS图象处理软件路径添加弧平滑光

PS图象处理软件路径添加弧平滑光

平滑,路径,图象,处理软件,电脑软件,先看一下原始地图。 设计素描 uff1a 创建PS图象处理软件的一个新图层,然后使用钢笔工具画一个曲线,根据背景。 (记住钢笔是在路径模式下工作的,而不是形状工具模式)。 然后一些细微的笔刷,选择白色,当StrokePat…

MySQL的安装提示,请键入nethelpmsg3

MySQL的安装提示,请键入nethelpmsg3

安装,提示,更多,电脑软件,MySQL,今天安装MySQL会提示以下错误: 我在网上找到了很多时间。 所以最终的解决方案是: 在bin目录下输入指令:mysqld -初始化 如下图所示: 以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。…

HTML5拖放效果的实现代码

HTML5拖放效果的实现代码

拖放,效果,代码,电脑软件,拖放 拖放是一个常见的特性,在对象被抓取后被拖到另一个位置。 在HTML5中,拖放是标准的一部分,任何元素都可以拖放。 Internet Explorer 9 +,Firefox,Opera,Chrome和Safari支持拖动。 注:Safari 5.1.2不支持拖动。 例子: …

利用oracle字符函数检测汉字的方法

利用oracle字符函数检测汉字的方法

字符函数,方法,检测,汉字,电脑软件,-验证汉字是否包含汉字。 创建测试表(一个VARCHAR2(10)); 插入测试值(‘'); 插入测试值(‘深刻'); 插入测试值('AAA'); 插入测试值({BBB}); 插入测试值(b鸟BB); 从测试中选择*; 全宽度,ASCII值范围是 uff00 - UFFFF 选择一…

展示2008张奥运门票照片

展示2008张奥运门票照片

照片,门票,奥运,电脑软件,到北京来工作很好,只要敢参加今年的奥运会,还买了一张奥运会入场券。举重比赛于8月10日上午10点在航空航天大学举行。 图片:北京奥运会门票公布工作人员公布其照片:北京奥运会门票门票公布五种家庭肖像 图片:北京奥运会…

PS图象处理软件教程:黑暗的景观色彩

PS图象处理软件教程:黑暗的景观色彩

图象处理,软件教程,景观,黑暗,色彩,今天有一门课,你要处理灰色和黑色的风景画。 灰度图像处理比较麻烦,颜色时间不能一步到位,需要用大量的层叠加来完成。首先是颜色和光色,然后微调脚本。当然,还可以添加合适的材料来装饰它! 原 最终效果 1…

如何在模板中添加或删除高级PPT教

如何在模板中添加或删除高级PPT教

教程,模板,或删除,高级,如何在,在WPS模板库下载模板,提高工作效率,但有时我们不需要背景音乐,如何将音乐与WPS的PPT模板是由其他版本应该不是很明白,没关系下一个简单的例子,在萧边的音乐告诉大家WPS PPT模板添加删除。 WPS PPT模板中添加和删…

js双击更改输入框的内容以修改内容

js双击更改输入框的内容以修改内容

双击,修改,输入框,内容,电脑软件,双击空格或文本来更改输入框的内容: HTML代码 { $ {地址$ } JS代码 双击可修改 功能showelement(元,ABC){ / / console.log(ABC); 变量列表; var =元素; 无功oldhtml = element.innerhtml; 无功newobj = document.cr…

ps快速切割切片法简介

ps快速切割切片法简介

切片,快速,简介,电脑软件,ps,今天给大家分享ps快速裁剪,切片方法,教程比较基础,不太熟悉PS的朋友看看吧! 步 1。让我们举一个例子。新的画布。例如,地图下面的九个位置。 2,按下面的方法拖放参考线,按住标尺的位置向下移动。 3,选择切片工具进行…

如何与ppt2013滚动条的文本框进行p

如何与ppt2013滚动条的文本框进行p

滚动条,教程,文本框,电脑软件,对于一些需要显示在PPT中的一篇文章,因为一个PPT的长周期是不完整的,但在第可能分散在多个页面,所以自分割整个会直接破坏了文章的完整性,在几页的文章很难统一,效果也不漂亮。下面的小编辑教你如何ppt2013使带有滚…

有微信、QQ空间同步的QQ空间

有微信、QQ空间同步的QQ空间

空间,同步,电脑软件,有微信,QQ,为方便起见,我们通常与QQ空间微信。具体的设置方法是什么让我们告诉你如何同步微信、QQ空间。 微信、QQ空间之间的同步方法 1。在微信圈 2。点击发布界面上的QQ空间 三.{ QQ空间}开启同步标志 4。然后单击{ …