在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 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
jquery操作angularjs对象
Jun 26 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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 源代码压缩小工具
2009/12/22 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
深入浅出学习python装饰器
2017/09/29 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python实现flappy bird游戏
2018/12/24 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
电气专业应届生求职信
2013/11/01 职场文书
毕业自荐信
2013/12/16 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
竞选班委演讲稿
2014/04/28 职场文书
法定代表人证明书
2014/11/28 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
CSS的calc函数用法小结
2022/06/25 HTML / CSS
MySQL池化框架学习接池自定义
2022/07/23 MySQL