[英]Run function once per event burst with jQuery
我正在使用jQuery侦听DOMSubtreeModified事件,然后执行一个函数。 我需要的是一种方法,每个事件突发仅运行一次功能。 因此,在这种情况下,事件只会在1秒后运行,然后在3秒后运行。 做这个的最好方式是什么?
jQuery的
$(function(){
setTimeout(function(){
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
},1000);
setTimeout(function(){
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
},3000);
$('#container').bind('DOMSubtreeModified',function(){
console.log('event');
functionToRun();
});
});
的HTML
<div id="container"></div>
更新资料
setTimeout函数只是用来模拟我的问题。 我需要一个不更改setTimeout代码的解决方案。 我遇到的问题是,我突发了DOMSubtreeModified事件,而每次突发只需要获取一个。
替代方法,它将控制任何功能的速率。
// Control the call rate of a function.
// Note that this version makes no attempt to handle parameters
// It always induces a delay, which makes the state tracking much easier.
// This makes it only useful for small time periods, however.
// Just clearing a flag after the timeout won't work, because we want
// to do the the routine at least once if was called during the wait period.
throttle = function(call, timeout) {
var my = function() {
if (!my.handle) {
my.handle = setTimeout(my.rightNow, timeout);
}
};
my.rightNow = function() {
if (my.handle) {
clearTimeout(my.handle);
my.handle = null;
}
call();
};
return my;
};
我自己解决了。
$(function(){
setTimeout(function(){
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
},1000);
setTimeout(function(){
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
},1100);
setTimeout(function(){
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
$('#container')[0].innerHTML = 'test';
},3000);
addDivListener();
});
function addDivListener() {
$('#container').bind('DOMSubtreeModified',function(){
functionToRun();
$(this).unbind('DOMSubtreeModified');
setTimeout(addDivListener,10);
});
}
function functionToRun(){
console.log('event');
}
3 times in the Firebug console, and is accurate down to 100 ms. 这会在Firebug控制台中打印3次 ,并且精确到100毫秒。
这似乎是您要找的东西:
$(
function()
{
setTimeout
(
StartWatching,
1000
);
}
);
function StartWatching()
{
$('#container')
.bind(
'DOMSubtreeModified',
function()
{
console.log('event');
StopWatchingAndStartAgainLater();
}
);
}
function StopWatching()
{
$('#container')
.unbind('DOMSubtreeModified');
}
function StopWatchingAndStartAgainLater()
{
StopWatching();
setTimeout
(
StartWatching,
3000
);
}
这将强制执行以下流程:
Document.Ready
Create DOM watching event after one second
On event, turn off event and recreate it after three seconds, rinse, repeat
尝试使用one()
处理程序
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.