How to reset setTimeout

Question

i have this action after click:

  remote_top.on('click',function(){
        if (program_changer_block.css('display','block')){
            var g_timer = null;
            clearTimeout(g_timer);
            setTimeout(function(){
                program_changer_block.fadeOut();
            }, 5100);
        }
        else if (program_changer_block.css('display','none')){
            setTimeout(function(){
                program_changer_block.fadeIn();
            }, 300);
        }
   });

What i'm trying to do is clear timeout after each click. Now after some fast clicks my blocks hide after 5100ms calculated from the first click. How to restart this timeout after each click? Something is wrong, can you help me?

Answer 1

have you tried control directly queue with clearQueue and delay ?

remote_top.on('click',function(){
    if(program_changer_block.css('display','block')){
        program_changer_block.stop(true,true).delay(5100).fadeOut();
    }
    else if(program_changer_block.css('display','none')){
        program_changer_block.stop(true,true).delay(300).fadeIn();
    }
});

the first true in stop() mean .clearQueue()

Answer 2

The setTimeout() function returns the timeout ID. Just store it in your g_timer variable and also make it global:

  var g_timer;
  remote_top.on('click',function(){
        if (program_changer_block.css('display','block')){
            clearTimeout(g_timer);
            g_timer = setTimeout(function(){
                program_changer_block.fadeOut();
            }, 5100);
        }
        else if (program_changer_block.css('display','none')){
            g_timer = setTimeout(function(){
                program_changer_block.fadeIn();
            }, 300);
        }
   });