debounce
对于高耗能事件,debounce 函数是一种不错解决方案。如果你不对 scroll、resize、和 key* 事件使用 debounce 函数,那么你几乎等同于犯了错误。下面的 debounce 函数能让你的代码保持高效:
// 返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用 N 毫秒后,再次调用它才会得到执行。如果有传递 ‘immediate' 参数,会马上将函数安排到执行队列中,而不会延迟。
function debounce(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);
};
};
// 用法
var myEfficientFn = debounce(function() {
// 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);debounce 函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时,该函数显得尤为重要。
poll
尽管上面提及了 debounce 函数,但如果事件不存在时,你就不能插入一个事件以判断所需的状态,那么就需要每隔一段时间去检查状态是否达到你的要求。
立即学习“Java免费学习笔记(深入)”;
function poll(fn, callback, errback, timeout, interval) {
var endTime = Number(new Date()) + (timeout || 2000);
interval = interval || 100;
(function p() {
// 如果条件满足,则执行!
if(fn()) {
callback();
}
// 如果条件不满足,但并未超时,再来一次
else if (Number(new Date()) < endTime) {
setTimeout(p, interval);
}
// 不匹配且时间消耗过长,则拒绝!
else {
errback(new Error('timed out for ' + fn + ': ' + arguments));
}
})();
}
// 用法:确保元素可见
poll(
function() {
return document.getElementById('lightbox').offsetWidth > 0;
},
function() {
// 执行,成功的回调函数
},
function() {
// 错误,失败的回调函数
}
);Polling 在 web 中已被应用很长时间了,并在将来仍会被使用。
once
有时候,你想让一个给定的功能只发生一次,类似于 onload 事件。下面的代码提供了你所说的功能:
function once(fn, context) {
var result;
return function() {
if(fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
// 用法
var canOnlyFireOnce = once(function() {
console.log('Fired!');
});
canOnlyFireOnce();
// "Fired!"
canOnlyFireOnce();
// nada
// 没有执行指定函数once 函数确保给定函数只能被调用一次,从而防止重复初始化!
以上就是javascript基本函数debounce、poll和once实例用法详解的详细内容,更多请关注php中文网其它相关文章!
java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号