Запускать функцию один раз для каждого события с помощью 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, и мне нужно получить только один пакет для каждого пакета.


javascript jquery bind innerhtml settimeout
person Sindre Sorhus    schedule 19.09.2009    source источник
comment
Если я правильно понимаю, setTimeout это не то, о чем вы спрашиваете. Вы хотите знать, как изменить элемент 6 раз, но запустить functionToRun только один раз, это правильно?   -  person Crescent Fresh    schedule 19.09.2009

Ответы (4)


arrow_upward
3
arrow_downward

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

// 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;
};
person Justin Love    schedule 19.09.2009
comment
Спасибо! Используя это в моем расширении Chrome (github.com/yuvipanda/yenWikipedia). - person Yuvi; 29.04.2011

arrow_upward
2
arrow_downward

Сам решил.

$(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');
 }

Это выводит event 3 раза в консоли Firebug с точностью до 100 мс.

person Sindre Sorhus    schedule 19.09.2009

arrow_upward
0
arrow_downward

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

документация

person dd .    schedule 19.09.2009
comment
Извините, я не могу уточнить и переписать ваш код, я тороплюсь. Но я могу сделать это позже, если вы не сможете понять это. - person dd .; 19.09.2009
comment
Уже пробовал, но он дает мне только одно событие из первого пакета событий (первый тайм-аут) и ничего во втором пакете. - person Sindre Sorhus; 19.09.2009

arrow_upward
0
arrow_downward

Кажется, это то, что вы ищете:

$(
  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
person David Andres    schedule 19.09.2009
comment
@mofle... внес небольшие изменения в то, как вызывается функция setTimeout. Я протестирую его локально, чтобы убедиться, что это работает. - person David Andres; 19.09.2009
comment
@mofle... подтвердил, что вышеизложенное работает, когда я изменяю StartWatching на простое добавление к div и делаю вызов StopWatchingAndStartAgainLater. Если это все еще не удается для вас, есть вероятность, что что-то не работает с привязкой к событию DOMSubtreeModified. - person David Andres; 19.09.2009
comment
@mofle .... и проверил, что он работает с DOMSubtreeModified в FireFox 3.5 и Google Chrome, по крайней мере. Это событие не срабатывает в IE 7.0. - person David Andres; 19.09.2009