jquery setTimout in loop just keeps launching

Question

I have an Ajax request which I want to launch every 5 seconds to see if a process has finished. For this I am trying to use setTimout(), however it just launches one process after the other without respecting the timeout. I've read multiple questions about this on SO and tried to implement the answers, however I cannot get it to work. What do I have to change to get this to work?

<script type="text/javascript">
$(function() {

$(document).ready(function() {
  var user = $('.user-id').text()
  var url = '/ajaxurl'
  var success = 0
  var time = 0
  var dataString = 'email='+user;
  checkServer(url,user,time,success,dataString);
});

function checkServer(url, user, time, success, dataString) {
    setTimeout(     
      $.ajax({
        type: "POST",
        url: url,
        data: dataString,
        success: function(data) {
          if (data == 'True') {
            success = 1
            window.location = "https://www.someurl.com";
          }
          else {
            time++
            console.log(time);
            console.log(data);
            if ((success == 0) && (time < 60)) {
              checkServer(url, user, time, success, dataString)
            }
          }
        }
      }), 5000);
};
});
</script>

score 3 · Accepted Answer · answered May 22 '15 at 11:37

3

Try wrapping your $.ajax() call in a function(){}

setTimeout(function(){ $.ajax({ ... })}, 5000);

Otherwise it will immediately fire upon compilation.

answered May 22 '15 at 11:37

Taplar

24,788
4
22
35

Spot on! Works like a charm now. – Vincent May 22 '15 at 15:53

antyrat · Answer 2 · 2015-05-22T11:43:53.383

1

In addition to @Taplar answer I would suggest you also to clear timeout timer before creating new one:

var myTimer = null;
function checkServer(url, user, time, success, dataString) {
    clearTimeout( myTimer );
    myTimer = setTimeout( 
...

Otherwise you will not have always 5 sec delay if for example ajax will execute faster than previous timeout callback.

edited May 22 '15 at 11:43

answered May 22 '15 at 11:37

antyrat

27,479
9
75
76

RemcoDN · Answer 3 · 2015-05-22T12:19:17.930

If you want your code to run every 5 seconds while the page is open you are better off using setInterval. You only use setTimeout if you want to use a code once. If you ever want to break your interval if some variable becomes true/false then you can use a clearInterval

For your code:

function checkServer(url, user, time, success, dataString) {
      $.ajax({
        type: "POST",
        url: url,
        data: dataString,
        success: function(data) {
          if (data == 'True') {
            success = 1
            window.location = "https://www.someurl.com";
          }
          else {
            time++
            console.log(time);
            console.log(data);
            // DEFINE A NOT SUCCESS HERE!
            if (false) {
                clearInterval(intVal);
            }
          }
        }
      });
};
$(document).ready(function() {
  var user = $('.user-id').text()
  var url = '/ajaxurl'
  var success = 0
  var time = 0
  var dataString = 'email='+user;

  var intVal = setInterval(function(){
      checkServer(url,user,time,success,dataString);
  }, 5000);

});

Thanks for your answer. What is the difference / advantage of using interval over timeout? — Vincent, May 22 '15 at 15:52
Check this stack overflow for the difference: http://stackoverflow.com/questions/729921/settimeout-or-setinterval — RemcoDN, May 22 '15 at 18:03

jquery setTimout in loop just keeps launching

3 Answers3