在JavaScript里防止事件函数高频触发和高频调用的方法_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了在JavaScript里防止事件函数高频触发和高频调用的方法_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2471字，纯文字阅读大概需要4分钟。
内容图文
网页中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技巧全部内容，希望文章能够帮你解决在JavaScript里防止事件函数高频触发和高频调用的方法_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。