setTimeout only works under 1000ms

Question

I want to have a timeout function so when a form is submitted the alert is displayed two seconds after the submit. The code I am using doesn't work:

$(document).ready(function() {
  $("#newsletter").submit(function() {
     setTimeout(function() {
      alert("submitted");             
    }, 2000);
   });
});

But when I change the 2000ms to 900 is seems to work fine:

$(document).ready(function() {
  $("#newsletter").submit(function() {
    setTimeout(function() {
     alert("submitted");              
   }, 900);
  });
});

How can I get the 2000ms to work?

it's javascript's `setTimeout` and it works here: http://jsfiddle.net/WouterJ/vMmhn/ — Wouter J, Mar 29 '13 at 09:44

score 5 · Answer 1 · answered Mar 29 '13 at 09:41

5

The only possible reason for this is that your form is getting submitted and the user is taken to the new page (the form's action) before the 2 seconds elapse.

As suggested in Thilo's comment, if showing the alert is unavoidable, submit it via AJAX so that the current page (containing the code to alert) remains intact and therefore executes.

answered Mar 29 '13 at 09:41

techfoobar

65,616
14
114
135

And this breaks your code because after the page is destroyed (to go to the new page), it cannot run any Javascript anymore. – Thilo Mar 29 '13 at 09:42
2

A solution would be to not load an entirely new page, but submit the data via Ajax. – Thilo Mar 29 '13 at 09:44
It doesn't re-direct?
– DLO Mar 29 '13 at 09:46
1

@DLO - Even though its the same page that is getting loaded, the fact is that it **is** getting reloaded - any JS code that was running before the reload will not continue automatically after reload. – techfoobar Mar 29 '13 at 09:47
@DLO Check here for an ajax solution [http://stackoverflow.com/a/2866127/474535](http://stackoverflow.com/a/2866127/474535) – bart s Mar 29 '13 at 09:48

SeinopSys · Answer 2 · 2022-08-07T15:17:08.667

You could change your code to this:

$(document).ready(function() {
  $("#newsletter").submit(function(event) {
     var element = this;
     event.preventDefault();
     setTimeout(function() {
      alert("submitted");

      //rest of the code

      element.submit();
    }, 2000);
   });
});

Snippet:

    $(document).ready(function() {
      $("#newsletter").submit(function(event) {
         event.preventDefault();
         var element = this;
         setTimeout(function() {
          alert("submitted");
           element.submit();
        }, 2000);
       });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form style="width:440px;" action="./" method="post" id="newsletter">
    <input type="text"/>
    <input type="submit" value="Submit"/>
</form>

score 0 · Answer 3 · answered Mar 29 '13 at 09:58

You can use like this. The problem with your original code was that, it got submitted before the alloted time.

$(document).ready(function() {
    $("#newsletter").submit(function(e) {
        e.preventDefault();
        setTimeout(function() {
            alert("submitted");
        }, 2000);
    });
});

setTimeout only works under 1000ms

3 Answers3