clearTimeout doesn’t seem to clear the globally defined timer ID

Question

I am trying to create something like an onFinishTyping event which sets a timeout of 3 seconds. If the user writes something during these 3 seconds, I need to destroy that timer and set a new one. The problem is that after each button click, the event is fired.

Here is what I have:

//setup before functions
const jq = jQuery.noConflict();
var typingTimer; // Timer identifier.
var doneTypingInterval = 3000; // Time in ms.

jq(document).ready(function() {
  // On keyup, start the countdown.
  jq('.table-search-field').keyup(function(event) {
    var typingTimer = setTimeout(function() {
      doneTyping(event.target);
    }, doneTypingInterval);
  });

  // On keydown, clear the countdown.
  jq('.table-search-field').keydown(function() {
    clearTimeout(typingTimer);
  });
});

// User has “finished typing”, do something.
function doneTyping(field) {
  var value = jq(field).val().toLowerCase(); // lower case

  jq.ajax('index.php?option=com_mycomponent&task=player.search&keyword=' + value)
    .done(function(data) {
      console.log('ok');
    }).fail(function() {
      console.log('fail');
    });
};

score 6 · Accepted Answer · edited Aug 27 '14 at 17:17

6

Don't declare this variable again, just remove var; you are creating a local copy of this variable by using the var keyword. The statement creates the variable locally in that specific function.

 typingTimer = setTimeout(function(){

edited Aug 27 '14 at 17:17

War10ck

12,387
7
41
54

answered Jul 29 '13 at 11:40

Govind Malviya

13,627
17
68
94

2

Don't pollute `window` unnecessarily though. – Lloyd Jul 29 '13 at 11:41
oh, I can see that. Thanks I'll accept it as answer in 5 minutes:) – insanebits Jul 29 '13 at 11:45

score 3 · Answer 2 · answered Jul 29 '13 at 11:55

Try using a closure so that the timeout variable is within the scope of the functions you use it in:

(function() {

 //setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 3000;  //time in ms
// Notice: jq = jQuery.noConflict();

jq(document).ready(function(){
    //on keyup, start the countdown
    jq('.table-search-field').keyup(function(event){
        var typingTimer = setTimeout(function(){
            doneTyping(event.target);
        }, doneTypingInterval);
    });

    //on keydown, clear the countdown
    jq('.table-search-field').keydown(function(){
        clearTimeout(typingTimer);
    });

});


//user is "finished typing," do something
function doneTyping (field) {
    var value = jq(field).val().toLowerCase();// lower case

    jq.ajax('index.php?option=com_mycomponent&task=player.search&keyword='+value)
    .done(function(data){
        console.log('ok');
    }).fail(function(){
        console.log('fail');
    }); 
};

})();

Don't just remove the var as suggested without considering the implications, you're needlessly dumping variables into the window object which can then be overwrote by other script blocks.

Thank's for your time, using separated namespace I believe would be better practice, and `var` was left there by accident while experimenting. But removing var wasn't complete solution, it appears that if you click multiple buttons at the same time multiple timers will be set and you will only have reference to the last set, thats why ajax request was sent multiple times. — insanebits, Jul 29 '13 at 12:21

clearTimeout doesn’t seem to clear the globally defined timer ID

2 Answers2