在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脚本调试方法小结
Nov 24 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
全面解析bootstrap格子布局
May 22 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 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实现paypal整合方法
2010/11/28 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
Javascript实现的分页函数
2006/12/22 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
node.js实现带进度条的多文件上传
2020/03/27 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
介绍Python中几个常用的类方法
2015/04/08 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python编程中类与类的关系详解
2019/08/08 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
什么是python的自省
2020/06/21 Python
医院检讨书范文
2014/02/01 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
抽奖活动主持词
2014/03/31 职场文书
2015入党自荐书范文
2015/03/05 职场文书
离职信范本
2015/06/23 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
python实现监听键盘
2021/04/26 Python
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python