在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 幻灯片插件(带缩略图功能)
Jan 24 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
详解VUE 数组更新
Dec 16 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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简单的会话类代码
2011/08/08 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
深入学习Python中的装饰器使用
2016/06/20 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
使用python实现简单五子棋游戏
2019/06/18 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
专科毕业生自我鉴定
2013/12/01 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
学历公证书范本
2014/04/09 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
运动会广播稿300字
2015/08/19 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python中三种花式打印的示例详解
2022/03/19 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android