Запуск функции один раз для пакета событий с jQuery

Question

Я использую 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> 

Update
Функция SetTimeout существуют только эмулировать мою проблему. Мне нужно решение без изменения кода setTimeout. Проблема, с которой я сталкиваюсь, заключается в том, что я получаю всплеск событий DOMSubtreeModified, и мне нужно получить только один пакет.

Answer 1

решить ее себя.

$(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 раза в консоли Firebug, и точность вплоть до 100 мс.

Answer 2

Это, кажется, что вы ищете:

$(
    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 

Answer 3

попробуйте использовать one() обработчик

documentation

Answer 4

Альтернативный метод, который будет контролировать скорость любой функции.

// 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; 
};