jQueryを使用してイベントバーストごとに関数を1回実行します
-
11-09-2019 - |
質問
jQuery を使用して DOMSubtreeModified イベントをリッスンし、関数を実行しています。私が必要としているのは、イベントバーストごとに関数を 1 回だけ実行する方法です。したがって、この場合、イベントは 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 イベントのバーストを取得するのですが、バーストごとに取得する必要があるイベントは 1 つだけであることです。
解決 2
それを自分自身を解決します。
$(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');
}
これは、Firebugのコンソールでイベントを3回印刷し、100ミリ秒まで正確である。
他のヒント
任意の関数の速度を制御する
別の方法、
// 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
(
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
所属していません StackOverflow