Блог

на самом деле я не могу найти точное название для этой проблемы. Но я могу описать это так, чтобы вы знали, что мне нужно. допустим, у меня есть кнопка #pressme, и я хотел бы привязать к ней обработчик события click. Внутри обработчика функции я буду использовать ajax для получения некоторых данных от сервера, а затем анализировать данные для обновления текста div # status, например: с 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 секунд. Однако я обнаружил, что существует проблема: если пользователь продолжает нажимать на кнопку: скажем, пользователь нажимает кнопку 1st, чтобы изменить текст на «обновлено», а затем через 18 секунд снова нажал, чтобы изменить текст на «не обновлено». И затем, только через 2 секунды, текст снова изменится на «N / A», потому что была выполнена 1-я функция setTimeout.

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

Спасибо!

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() для хранения и извлечения идентификатора времени для каждого элемента.