降低JavaScript事件民意调查的频率
-
09-10-2019 - |
题
您如何降低JavaScript事件投票的频率?我担心的事件是 占用 和 滚动. 。当某人分别调整浏览器或滚动滚动时,这些事件每秒可能会触发数十次。我希望这些事件仅每500毫秒一次发生一次,因此我不必花几个小时来优化我的活动处理程序,并确保它们不会泄漏内存。
解决方案
var resizeTimeout;
window.onresize = function() {
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(function() {
// Do it!
}, 500);
});
这将触发 setTimeout()
该人完成调整大小后的功能〜500ms。
这 onscroll
版本非常相似:)
其他提示
您无法真正控制活动的频率,您可以做一些事情,例如记住第一次事件的射击时间,然后在每个结果中,您检查一下第一个事件是否超过500毫秒 - 如果是,则继续进行活动处理程序,否则您只需退出活动Hander
在处理程序的开头,检查以来是否已经过去500ms,只需返回即可。
您不能阻止这些事件发射。他们总是这样。您要做的是立即停止聆听,然后处理事件以避免重复。然后在Settimeout之后再次设置整个处理程序。除非有人调整窗口,否则不再发生递归。我在这里使用5000毫秒,因为在控制台中可以看到它可以使用。即使您像SPAZ一样调整大小,也不应该在FF控制台中看到一次以上的垃圾邮件。
(function staggerListen(){
window.onresize = function(){
window.onresize = false;
console.log('spam');
setTimeout(staggerListen,5000);
};
})()
使用Logic来决定是否每次操作员开火时仍在技术射击处理程序和IF语句 +查找时都要做任何事情。那会变得沉重。
检查下划线 调试 功能
创建并返回一个已通过功能的新版本的拒绝版本,该版本将推迟其执行,直到自上次调用以来,等待毫秒就已经过去了。对于仅在输入停止到达后才能实现的行为有用。例如:呈现Markdown评论的预览,在窗口停止调整大小后重新计算布局,等等。
例子:
window.onscroll = _.debounce(
function() {
// do something
}, 500, false
);
我曾经像在接受的答案上一样做到这一点,但问题是,只有在指定超时后才触发。我想要第一次处理调整大小的解决方案。这是我最终所做的。
var _resize_is_busy = false;
var _resize_scheduled = false;
var _resize_precision = 100;
// This register for window resize events. No need to change anything.
$(window).resize(function () {
if (!_resize_is_busy) {
// call the scheduler who will do the work and set a timer to
// check of other resizes occured within a certain period of time
_resize_scheduler();
}
else {
// the resizer is busy, i.e. a resize have been handled a little
// time ago and then the scheduler is waiting some time before
// handling any other resize. This flag tells the scheduler that
// a resize event have been receive while he was sleeping.
_resize_scheduled = true;
}
});
// This is the scheduler. No need to change anything.
var _resize_scheduler = function () {
_resize_is_busy = true;
_resize_scheduled = false;
setTimeout(function () {
_resize_is_busy = false;
if (_resize_scheduled)
_handle_resize();
}, _resize_precision);
_handle_resize();
}
var _handle_resize = function () {
console.log('DOING ACTUAL RESIZE');
// do the work here
//...
}
我希望这将有所帮助。