JavaScript中短时间高频次触发事件的优化

在浏览器中，如果在短时间内多次触发可以改变DOM树结构的事件，可能导致页面机构出现混乱甚至浏览器的崩溃。最近在做项目中，我无意中遇到一个问题，当滚到条到达某个高度时，使相应的元素从无到有，但是每次刷新页面后第一次到达时，鼠标滚轮都会停顿下来，经过询问老师和上网搜索，发现是监听滚动条事件造成的，因为滚动条动了一点，就会触发很多次监听事件，而且时间是极短的;所以就会造成浏览器也来不及反应，要卡在那一会。

后来我总结了几种解决方法。

一、函数节流

通过函数阻止相同的时间在较短时间连续触发

这里通过200ms的延迟，当下次时间需要执行的时候，如果没超过200ms，会先清除原来的延时器，从新开始定时;这样可以保证两次相同的时间最少间隔在200ms以上。

二、防抖函数

防抖函数使在短时间内多次执行的事件合并成了一个时间在延迟时间后执行;

三、使用 rAF(requestAnimationFrame)

此函数是浏览器原生方法，有固定的频率，每秒执行60次函数，这样在上次函数还没结束前，下次函数不会调用执行。虽然这个方法性能更优化，但是此方法在时间上不能控制。

本文来自千锋教育，转载请注明出处。

JavaScript中短时间高频次触发事件的优化相关推荐

js 手机端触发事事件、javascript手机端/移动端触发事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
JavaScript:window.event.srcElement（指触发事件的对象）
event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象. srcelement 是事件初始目标的html元素对象引用,因为事件通过元素容器层次冒泡,可以 ...
JavaScript触发事件大全--能力工场
1.onabort:当用户终止正在打开的网页时产生该事件. 2.onblur:某元素失去活动焦点时产生该事件.例如鼠标在文本框中点击后又在文本框外点击时就会产生. 3.onchange:当网页上某元素 ...
JavaScript原生自动触发事件
在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件 ...
JavaScript中的触发事件
这两天在敲订餐管理系统的界面的时候,才感觉到自己在前端这里才疏学浅,什么都没有整理过,因为页面的效果想使用JavaScript来展示,却发现不知道JS的代码是如何被驱动的,因此才有了这篇博客,帮助大家 ...
javascript鼠标双击时触发事件大全
javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
java鼠标js触发事件吗,JavaScript常见鼠标事件与用法分析
摘要:这篇JavaScript栏目下的"JavaScript常见鼠标事件与用法分析",介绍的技术点是"JavaScript.鼠标事件.鼠标.事件.用法.分析", ...
JavaScript自动触发事件
有时候,我们需要代码自动触发对应的事件,而不需要人为操作.比如,一个按钮的点击事件,不要点击它,而让它自动执行. 首先定义事件,先按照传统的 onclick 方式来.(这里以点击某个标签事件为梨) v ...
JavaScript 自定义事件、触发事件
1. 自定义事件的基本步骤创建事件. var event = document.createEvent('Event'); 初始化事件[参数:事件类型.事件是否在DOM中冒泡.是否可以用 preve ...

JavaScript中短时间高频次触发事件的优化

JavaScript中短时间高频次触发事件的优化相关推荐

最新文章

热门文章