Question

actually I can not find an exact title for this problem. But I can describe it so that you know what I need.
say I have a button#pressme, and I would like bind a click event handler to it. Inside the function handler, I will use ajax to get some data from the sever and then parse the data to update a div#status’s text, for example: from N/A to updated/not updated. Because the data is always changing, I would like to add another function to change the div#status back to N/A.
Here is what I come up with this purpose:

 $("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: ....
                  )};
  });

This seems working as I planned, because the text will change back to “N/A” after 20 seconds. However, I found a problem exists: if the user keep clicking the button: say the user click button 1st to change the text to “updated”, and then after 18seconds, clicked again to change the text to “not updated”. And then, only after 2seconds, the text will change back to “N/A”, because the 1st setTimeout function got executed.

If I want to remember the last time’s user click, and only update the div’s text 20 seconds after the user’s last click? How to achieve this easily?

Thanks!

Answer 1

1. retain a handle to the timer:

   timerId = setTimeout(...);

2. every time you restart the timer, clear the old one first:

   clearTimeout(timerId);

e.g.:

$("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: ....
              )};
  });

EDIT updated to show using the jQuery .data() method to store and retrieve the timerId on a per-element basis.