如何在JavaScript里防止事件函数的高频触发和调用
来源:互联网 发布:java io深入理解 编辑:程序博客网 时间:2024/06/08 13:36
网页中JavaScript最基本的功能是监听或响应用户的动作,这非常的有用。用户的动作有些频率非常高,有的十分罕见。有些监听器函数的执行如闪电般完成,而有些繁重的会把浏览器拖死。拿浏览器窗口的resize事件来说,这种事件会在浏览器窗口大小的每一尺度变化都触发一次,如果监听器体量很大,你的浏览器很快就会被拖垮。
很显然,我们不能允许浏览器被拖垮,但我们又不能删除删除监听器。然而,我们可以限制函数调用的频度,弱化事件函数运行带来的影响。相对于让窗口的每一步size的变化都触发一次监听器函数,我们可以现在监听函数的触发的最小间隔必须大于多少毫秒,让它保持着合理的调用频道,确保不毁坏用户体验。有一个很好的js工具库叫做Underscore.js,它里面有一个简单的方法能让你轻松的创建降低事件函数触发频度的监听器。
JavaScript代码
降频监听器的代码很简单:
// 创建监听器var updateLayout = _.debounce(function(e) {// Does all the layout updating here}, 500); // 最低500毫秒运行一次// Add the event listenerwindow.addEventListener("resize", updateLayout, false);
…这段Underscore.js代码底层实际上是用interval检查事件函数调用的频度:
// Returns a function, that, as long as it continues to be invoked, will not// be triggered. The function will be called after it stops being called for// N milliseconds. If `immediate` is passed, trigger the function on the// leading edge, instead of the trailing._.debounce = function(func, wait, immediate) {var timeout;return function() {var context = this, args = arguments;var later = function() {timeout = null;if (!immediate) func.apply(context, args);};var callNow = immediate && !timeout;clearTimeout(timeout);timeout = setTimeout(later, wait);if (callNow) func.apply(context, args);};};
代码并不是特别复杂,但用不着自己写也是一种幸福。这个debounce函数并没有依赖其他的Underscore.js函数,所以,你可以把这个方法添加到你喜欢的js工具库中,例如jQuery或MooTools,很容易:
// MooToolsFunction.implement({debounce: function(wait, immediate) {var timeout, func = this;return function() {var context = this, args = arguments;var later = function() {timeout = null;if (!immediate) func.apply(context, args);};var callNow = immediate && !timeout;clearTimeout(timeout);timeout = setTimeout(later, wait);if (callNow) func.apply(context, args);};}});// Use it!window.addEvent("resize", myFn.debounce(500));
正如上面说的,窗口的resize事件是最常见的使用降频操作的地方,还有一个常用的地方是,根据用户的按键输入给出自动补全提示。我非常喜欢收集这样的代码片段,它们能轻松的让你的网站更高效。同时也推荐大家研究一下Underscore.js,里面提供了大量非常有用的函数。
0 0
- 如何在JavaScript里防止事件函数的高频触发和调用
- 如何在javascript里调用asp的函数
- 如何在统计图超链接里调用JavaScript函数
- javascript如何获取触发事件的对象
- (转)不要在WM_ACTIVATE里调用可以触发活动转移的函数
- 不要在WM_ACTIVATE里调用可以触发活动转移的函数
- JavaScript--函数的直接调用和事件调用
- 如何在类里调用MXML内声明的函数
- 如何在c里调用c++的类函数
- 在ViewDidLoad 里添加UIButton的点击事件,不能触发。
- PB事件/函数的触发机制和触发方式
- PB事件/函数的触发机制和触发方式
- PB事件/函数的触发机制和触发方式
- PB事件/函数的触发机制和触发方式
- javascript中函数事件触发和Obj对象获取
- 控件里的textbox事件转到页面去触发(调用其它控件和页面上的值)
- oninput和onchange在input框里触发函数的问题
- javascript触发事件和说明
- 自己动手写编辑器——Lumia Sidebar
- 使用svn:ignore属性忽略某些文件
- 实现 iframe 子页面调用父页面中的js方法
- (八)-实现新闻页面
- C++中指针和引用的区别
- 如何在JavaScript里防止事件函数的高频触发和调用
- C++之虚函数继承和虚继承
- patch和diff的用法
- 单例模式
- IntelliJ IDEA使用笔记
- linux修改mac
- [LCA][dfs序]BZOJ 2819: Nim
- AlarmManager的使用与几个获取时间的操作
- window.createPopup()用法以及短消息提示框代码