JQuery очередь событий? - PullRequest
Новая
       12

JQuery очередь событий?

0 голосов
/ 28 мая 2011

на самом деле я не могу найти точное название для этой проблемы. Но я могу описать это так, чтобы вы знали, что мне нужно. скажем, у меня есть кнопка # pressme, и я хотел бы привязать к ней обработчик события щелчка. Внутри обработчика функции я буду использовать ajax, чтобы получить некоторые данные с сервера, а затем проанализировать данные, чтобы обновить текст статуса div #, например: с N / A на обновленный / не обновленный. Поскольку данные постоянно меняются, я хотел бы добавить еще одну функцию, чтобы изменить статус div # на N / A. Вот что я придумаю с этой целью: 

 $("button#pressme").bind("click", function(){
           $.ajax{(
                   type:"POST",
                   .....
                   success: function (xml, status) {
                     .....
                     $("div#status").text("updated");
                     setTimeout(function(){$("div#status").text("N/A")}, 20000);
                   },
                   error: ....
                  )};
  });

Кажется, это работает, как я планировал, потому что текст изменится обратно на "N / A" через 20 секунд. Однако я обнаружил, что существует проблема: если пользователь продолжает нажимать кнопку: скажем, пользователь нажимает кнопку 1-й, чтобы изменить текст на «обновленный», а затем через 18 секунд снова щелкнет, чтобы изменить текст на «не обновленный». И затем, только через 2 секунды, текст снова изменится на «N / A», потому что 1-я функция setTimeout была выполнена.

Если я хочу запомнить последний пользовательский щелчок и обновлять текст div только через 20 секунд после последнего щелчка пользователя? Как этого легко добиться?

Спасибо!

1 Ответ

1 голос
/ 28 мая 2011

  1. сохранить ручку таймера:

    timerId = setTimeout(...);

  2. каждый раз, когда вы перезапускаете таймер, очищайте старый первый :

    clearTimeout(timerId);

например:. 

$("button#pressme").bind("click", function() {
       var that = this;
       $.ajax{(
               type:"POST",
               .....
               success: function (xml, status) {
                 var timerId = $(that).data('timerId');
                 .....
                 $("div#status").text("updated");
                 if (timerId) { 
                     clearTimeout(timerId);
                 }
                 timerId = setTimeout(function(){$("div#status").text("N/A")}, 20000);
                 $(that).data('timerId', timerId)
               },
               error: ....
              )};
  });

РЕДАКТИРОВАТЬ обновлено для отображения с использованием метода jQuery .data() для хранения и получения timerId для каждого элемента.

...