Execute AJAX every n seconds using setTimeout(fn, 0)

Question

I'm trying to execute an Ajax call to check if a DB table was updated with some specific new data.

I found part of the solution in this question: instead of using a while loop (which apparently floods the browser), one should use two independent functions, one of which uses setTimeout(fn,0) (explanations on why this trick successfully allows Ajax calls not to overlap and flood the browser here and in this video).

My question is: how to force a specific interval of time between each Ajax call? I've tried setting a time superior to 0 (e.g. setTimeout(checkNewData(), 7000); ), but this seems to have no effect on the actual delay between each Ajax call: as soon as one finishes, the next begins.

Note: In the example below I have an on/off switch (stored in autoload_switch) that can be toggled to interrupt the process

checkNewData() //starts the looping function

function checkIfAutoLoadOn(){
    if(autoload_switch === "on")
        setTimeout(checkNewData(), 7000);
}

function checkNewData() {
  //Check if solutions
  $.ajax({
      async: true,
      type: "POST",
      url: "cgi-bin/check_NewData.py",
        contentType: "application/x-www-form-urlencoded;charset=ISO-8859-15",
      data: JSON.stringify(data_refs),
      dataType: "json"
    })
    .done(function(result) {
      if (result["new_data"]==="true") {
        // Do sth with data     

      } else if (result["new_data"]==="false") {
        //Check again in some seconds if new data arrived
        checkIfAutoLoadOn()     
      }
    })
}

`checkNewData()` executes the query and returns the result as a parameter to the `setTimeout`. You want pass the reference by omitting the parenthesis. (So `setTimeout(checkNewData, 7000);`) (And as mentioned by AjAX, use `setInterval` to repeat it instead of executing it once. — Ivar, Apr 14 '18 at 14:57
@AjAX. thanks, but I had also tried setInterval(), but I believeit doesn't prevent the ajax calls from overlapping as the `setTimeout(fn, 0)` does. — sc28, Apr 14 '18 at 20:32
@Ivar Thanks for spelling this out: I didn't realize using the parentheses or not would have this consequence. But indeed removing them enabled the number of milliseconds to be considered. Note I didn't have to use `setInterval()` for this. If you want to post your comment as answer I'll gladly accept it. — sc28, Apr 14 '18 at 20:32
@sc28 If that was the only problem it is a better idea to close it as a duplicate. — Ivar, Apr 14 '18 at 21:03
@Ivar oh right, my bad, sorry and thanks a lot for the help anyway! — sc28, Apr 14 '18 at 21:07

Alpesh Jikadra · Accepted Answer · 2018-04-15T14:49:49.777

0

There is only 1 mistake in your existing code

you have wrote

setTimeout(checkNewData(), 7000);,

instead of

setTimeout(checkNewData, 7000);

I hope this will solve your problem

checkNewData(); //starts the looping function

function checkIfAutoLoadOn(){
    if(autoload_switch === "on")
        setTimeout(checkNewData, 7000);
}

function checkNewData() {
  //Check if solutions
  $.ajax({
      async: true,
      type: "POST",
      url: "cgi-bin/check_NewData.py",
        contentType: "application/x-www-form-urlencoded;charset=ISO-8859-15",
      data: JSON.stringify(data_refs),
      dataType: "json"
    })
    .done(function(result) {
      if (result["new_data"]==="true") {
        // Do sth with data     

      } else if (result["new_data"]==="false") {
        //Check again in some seconds if new data arrived
        checkIfAutoLoadOn()     
      }
    })
}

edited Apr 15 '18 at 14:49

answered Apr 14 '18 at 15:19

Alpesh Jikadra

1,692
3
18
38

Thanks for the example, but I believe the `setInterval()` doesn't prevent the ajax calls from overlapping as the `setTimeout(fn, 0)` does (at least not when I tried to apply this example to my situation). I think the problem in my case was about using the parentheses in the function called by `setTimeout()` (see comment in main question). – sc28 Apr 14 '18 at 20:33
Why do you want to execute ajax call in 0 seconds ? – Alpesh Jikadra Apr 15 '18 at 03:52
Well, I don't really _want_ to, but this trick makes sure the next Ajax call doesn't get called until the stack is clear from the previous (I found the video cited in my original question explains this very clearly). I wanted to combine this trick AND choose a time to wait between each call. As noted by Ivar, this is trivial, provided the called function does not contain parentheses. – sc28 Apr 15 '18 at 10:59
Please be sure what do you want to do? – Alpesh Jikadra Apr 15 '18 at 11:02
I want to run a series of Ajax calls that are certain to start sequentially, with at least a certain time step (e.g. 30 seconds) between them. This is needed because in some cases the Ajax may require lengthy server-side processing (exceeding 30 seconds), while in other cases the Ajax may be fairly quick (2 seconds). With the mechanism above, I can guarantee the process will be carried out without triggering an Ajax call if the previous one takes longer than 30 seconds. There are surely other ways to achieve this, but I got the functionality I needed without using `setInterval()`. – sc28 Apr 15 '18 at 13:42
So basically you want to execute only after first ajax call complete right ? and this without setInterval() correct ? – Alpesh Jikadra Apr 15 '18 at 14:26
@sc28 ,Hi I have again update my answer , could you please try with that – Alpesh Jikadra Apr 15 '18 at 14:50
Yes that's it. I'm not sure what the policy is for marking accepted answers in duplicate questions, but I'll go ahead and accept yours because it clarifies the lack in my original question. Thanks for the time! – sc28 Apr 15 '18 at 16:55

Execute AJAX every n seconds using setTimeout(fn, 0)

1 Answers1