Question

I’m pretty new with Javascript and jQuery and can’t quite figure out settimeout.

What I’m trying to do it start a timer with a click. It will slide a page to where there is an input to enter an email. If, in 20 seconds, there is nothing typed, I want it to do something. But if they do enter something, I’d like the 20 second timer reset to 20 seconds onkeyup. And finally, if the form is submitted, I want the timeout cancelled.

$('#button').click(function(){
  $('#pane').scrollTo( '1000px', 500);
  setTimeout(goback, 20000);
  function goback() {
  $('#pane').scrollTo ('0px', 500);
  $('#input').keyup(function(){
    clearTimeout(goback);
    setTimeout(goback, 20000);
};
$('#submitemail').click(function(){
  //form submit stuff
  clearTimeout(goback);
});

Could you please point me in the right direction?

var timer;
$('#button').click(function(){
     $('#pane').scrollTo( '768px', 0 );
     $('#emailinput').delay(1000).focus();
     $('#slide2fadeout').css("display", "block").fadeOut();
     timer = setTimeout(goback, 20000);              //in 20 seconds start goback function
     function goback(){
         $('#like').scrollTo( '0px', 0 );            //scroll back to top
         $('#emailinput').val('');                   //clear any partial entry
     };
     $('#emailinput').keyup(function(){
         clearTimeout(timer);
         timer = setTimeout(goback, 20000);
     };
});

Here’s my actual code… can’t seem to get it working right. Any help appreciated.

Answer 1

You need to save the return value of setTimeout somewhere in order to cancel it later:

var timer;
$('#button').click(function () {
    ...
    timer = setTimeout(goback, 20000);
    ...
    clearTimeout(timer);
}