如何在JavaScript里防止事件函数的高频触发和调用
网页中JavaScript最基本的功能是监听或响应用户的动作,这非常的有用。用户的动作有些频率非常高,有的十分罕见。有些监听器函数的执行如闪电般完成,而有些繁重的会把浏览器拖死。拿浏览器窗口的resize事件来说,这种事件会在浏览器窗口大小的每一尺度变化都触发一次,如果监听器体量很大,你的浏览器很快就会被拖垮。
很显然,我们不能允许浏览器被拖垮,但我们又不能删除删除监听器。然而,我们可以限制函数调用的频度,弱化事件函数运行带来的影响。相对于让窗口的每一步size的变化都触发一次监听器函数,我们可以现在监听函数的触发的最小间隔必须大于多少毫秒,让它保持着合理的调用频道,确保不毁坏用户体验。有一个很好的js工具库叫做Underscore.js,它里面有一个简单的方法能让你轻松的创建降低事件函数触发频度的监听器
JavaScript代码
降频监听器的代码很简单:
// 创建监听器
var updateLayout = _.debounce(function(e) { // Does all the layout updating here }, 500); // 最低500毫秒运行一次 // Add the event listener
window.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,很容易:
// MooTools
Function.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,里面提供了大量非常有用的函数。
如何在JavaScript里防止事件函数的高频触发和调用的更多相关文章
- NX二次开发-C#使用DllImport调用libufun.dll里的UF函数(反编译.net.dll)调用loop等UF函数
在写这篇文章的时候,我正在头晕,因为下班坐车回家,有些晕车了.头疼的要死.也吃不下去饭. 版本:NX11+VS2013 最近这一年已经由C++过度到C#,改用C#做应用程序开发和NX二次开发. C#在 ...
- javascript里阻止事件冒泡
如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性 ...
- PB事件/函数的触发机制和触发方式
PB作为windows下的一个非常便捷的DB开发工具,有着和windows一样的消息触发机制PB提供了相应event/function触发机制和触发方式,用户可以根据自己的实际需要选用不同方法. 1. ...
- JavaScript节流与防抖函数封装
js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- JavaScript跨浏览器绑定事件函数的优化
JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...
- JavaScript window.onload 事件和 jQuery ready 函数有何不同?
JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
- Safari 里的javascript 里不能用submit作为函数名
Safari 里的javascript 里不能用submit作为函数名, 这样写的时候,怎么也运行不了JeasyUI的onSubmit的function, 改个名就可以了.而在chrome下面就没问题 ...
随机推荐
- ActiveMQ(5.10.0) - Configuring the Simple Authentication Plug-in
The easiest way to secure the broker is through the use of authentication credentials placed directl ...
- Linux 命令 - wc: 统计文件的行数、字数和字节数
命令格式 wc [OPTION]... [FILE]... 命令格式 -c, --bytes 打印字节数. -m, --chars 打印字符数. -l, --lines 打印行数. -L, --max ...
- .NET微信支付(H5仅限公众号支付)
闲来无事,恰好有一个要用微信公众平台支付的功能,研究来研究去,就是要细心和多看腾讯提供的文档.当然有几个坑是很有必要说明一下的 公众号支付,这里统一叫H5支付,以下都是. 在做H5支付的时候,第一步就 ...
- SQL Server的三种物理连接之Merge join(二)
简介 merge join 对两个表在连接列上按照相同的规则排序,然后再做merge,匹配的输出. 下面这个动态图展示了merge join的详细过程. merge join示例 创建两个表 IF O ...
- error LNK2005: DDX_Control 已经在 uafxcwd.lib(wincore2.obj) 中定义
编译错误提示: 1>afxnmcdd.lib(wincore2.obj) : error LNK2005: "void __stdcall DDX_Control(classCData ...
- Objective-C 【单个对象内存管理(野指针&内存泄露)】
------------------------------------------- 单个对象内存管理 (1)野指针 ①定义了一个指针变量,但是并没有赋初值,它随机指向一个东西 ②某指针变量指向的内 ...
- Objective-C 【@property和@synthesize关键字】
------------------------------------------- @property关键字的使用及注意事项 直接上代码和注释了! // //@property关键字的使用 //① ...
- TCL_事务控制语言
TCL transaction 事务 -- DML 定义为把一连串的操作作为单个逻辑工作单元处理 ----- 例如:银行转账 ...
- JVM系列三:JVM参数设置、分析(转载)
不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Java ...
- jquery.ajax中的ifModified参数的误解
原来以为ifModified是为了在AJAX请求是发送 If-Modified-Since头,让服务端返回304. 测试代码如下: $(function () { test(); window.set ...