在JavaScript里防止事件函数高频触发和高频调用的方法


Posted in Javascript onSeptember 06, 2014

网页中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 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
JS中的模糊查询功能
Dec 08 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
js获取页面传来参数的方法
Sep 06 #Javascript
用javascript关闭本窗口技巧小结
Sep 05 #Javascript
使用jquery解析XML示例代码
Sep 05 #Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 #Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 #Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 #Javascript
jQuery表格插件datatables用法总结
Sep 05 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
激活 ActiveX 控件
2006/10/09 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
react redux入门示例
2018/04/19 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python人人网登录应用实例
2014/09/26 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
基于python实现高速视频传输程序
2019/05/05 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
2015年大学生社会实践评语
2015/03/26 职场文书
法律意见书范文
2015/06/04 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
如何在Python中妥善使用进度条详解
2022/04/05 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python