在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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
javascript学习小结之prototype
Dec 03 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
JS搜狐面试题分析
Dec 16 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
php身份证号码检查类实例
2015/06/18 PHP
php截取视频指定帧为图片
2016/05/16 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Python生成随机MAC地址
2015/03/10 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python 调试冷知识(小结)
2019/11/11 Python
Python如何安装第三方模块
2020/05/28 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
企划经理的岗位职责
2013/11/17 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
高三复习计划
2015/01/19 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis