Reset setTimeout object, if exist

Question

When someone clicks my flags from a long list of flags, I want to show the number of selected flags in a small popup. My problem is that the small pop-up element should disappear 5 seconds after the last click, which is normal for one click, but if I quickly check 5 boxes, the timer will still be set in the first field, as a result of which the popup element disappears too fast.

As you can see in my function, I tried to use the clearTimeout(timeoutName) function, but experienced some problems with its application. The console log states that clearTimeout(timeoutName) undefined, which I can understand: setTimeout is not running yet.

How can I check if a timer exists before I clear it? Or is this really not the best method? When the checkbox is selected (this function works), a timer may be started, but sometimes it cannot be.

 $('.name_boxes').live('click', function() { var checked_count = $('.name_boxes:checked').length; // other stuff clearTimeout(hide_checked_count_timer); // if exists???????? $(".checked_count").hide(); $(".checked_count").text(checked_count+" names selected"); $(".checked_count").show(); hide_checked_count_timer = setTimeout(function() { $(".checked_count").hide(); },5000); }); 

Any help gratefully received ...

Answer 1

Just declare the timer variable outside the click handler:

 var hide_checked_count_timer; $('.name_boxes').live('click', function() { var checked_count = $('.name_boxes:checked').length; // other stuff clearTimeout(hide_checked_count_timer); // if exists???????? $(".checked_count").hide(); $(".checked_count").text(checked_count+" names selected"); $(".checked_count").show(); hide_checked_count_timer = setTimeout(function() { $(".checked_count").hide(); },5000); }); 

http://jsfiddle.net/kkhRE/

---

Given that .live deprecated, you should delegate the .on event:

 // Bind to an ancestor. Here I'm using document because it an // ancestor of everything, but a more specific ancestor // would be preferred. $(document).on('click', '.name_boxes', function() { // ... }); 

Answer 2

You can use the power of short circuit operators

 hide_checked_count_timer && clearTimeout(hide_checked_count_timer); 

The right operator will only work if the left variable is not undefined.

Answer 3

Q. The console log states that clearTimeout (timeoutName) is undefined, which I can understand: setTimeout is not running yet.

a. Return Value clearTimeout() returns undefined regardless of whether the timeout has been cleared. He has no concept of success that can be tested. If there is a timeout associated with the missing identifier, it will be cleared, otherwise nothing will happen.

Q. How can I check if a timer exists before I clear it?

You cannot, at least not in the sense that there is some registry of outstanding timeouts that you can request. As you already know, the .setTimeout() function returns the id for the timeout just queued, and you can use this identifier to clear it before it starts, but there is no way to check whether it is already running. An identifier is just a number, so the variable you saved will continue to hold that number even after the timeout is either started or cleared.

There is no harm in calling clearTimeout() with an identifier for a timeout that has already been executed - basically, if the timeout for this identifier is in the queue, it will be cleared, otherwise nothing will happen.

The easiest way to test “Is there another timeout that is not running yet” is to set the variable holding the timer to zero when the timeout is executed, that is, inside the function that you queued:

 var timerid = setTimout(function() { timerid = null; // other operations here as needed }, 5000); // in some other code somewhere if (timerid != null) { // timer hasn't run yet } else { // timer has run } 

The variable that you save the timer should be in the area that you can access, both where you set it and where you check it, i.e. do not declare it as a local variable in the event handler.

Answer 4

to check if its use exists;

 if (typeof timerid == 'undefined') { //timer has not been set so create it timerid = setTimeout(function(){ var something = true;}, 5000); }