Timing a set of functions with asyncronous subroutines

Question

I have two functions periodically called via setInterval. The goal is to defer Function B until Function A is done (and vis versa). Currently, Function A will start, complete some of its subroutines, but not reach the end before Function B begins.

I've tried passing Function B as an argument of Function A. I am not sure if that was sufficient to create a callback. I also tried jQuery's $.when(setInterval(functionA, 10000)).then(setInterval(functionB, 5000)).

How do I ask JavaScript to wait for functions/blocks of code to finish? Thank you in advance.

---

Edit: Below is code very similar to my original. Sorry for not being concise.

Function A, getFruits(): There is a remote JSON that changes on its own (fruits.json). getFruits() does two things: 1) It empties an array, [allFruits] (just in case); 2) It adds all the names of fruit currently in the remote JSON to [allFruits]. Now, [allFruits] is an instanced copy of the remote JSON. Before this question, I only called getFruits() once, at startup; in other words, I did not use setInterval for getFruits().

Function B, checkFruits(): Now checkFruits() periodically (setInterval(checkFruits, 5000)) compares [allFruits] to the remote version. If any fruit was added to the remote version, checkFruits appends [allFruits] with those fruits' names; it also runs useful code (i.e. pushes the new names to an array [queue]).

For this implementation, it is important to create an initial list so only new (post-startup) fruit trigger the useful code of checkFruits(). Moreover, it is important only to add (never subtract) names from [allFruits] within a session. This is to prevent a new fruit from triggering the useful code more than once per session.

Problem: Now I want to make getFruits() (Function A) periodic. Because getFruits() empties [allFruits], it will allow the names that built up to again trigger useful code (but only once in between invocations of getFruits()). However, when I use setInterval(getFruits, 10000), there are times (in this example, always) when getFruits() overlaps with checkFruits(). When that happens, I notice only part of getFruits() finishes before checkFruits() starts. The console.log() messages appear in this order: 'getFruits() start:', 'checkFruits():', 'getFruits() end:'. Furthermore, my useful code is ran before getFruits() finishes (this is what is really undesired), and [allFruits] gets duplicates. This would not occur if getFruits() completely finished before checkFruits() jumped in.

debugging = true;

var debug = function() {
 if (debugging){
  console.log.apply(console, arguments)
 };
}

var allFruits = [];
var queue = [];

var getFruits = function() {
 allFruits = []; // Empty the list
 debug('getFruits() start:', 'allFruits =', allFruits, 'queue =', queue);
 $.ajax({
  url: 'fruits.json',
  dataType: 'json',
  success: function(data) {
   data.fruits.forEach(function(element) {
    allFruits.push(element.name);
   });
   debug('getFruits() end:', 'data =', data, 'allFruits =', allFruits, 'queue =', queue);
  },
 });
}

var checkFruits = function() {
 $.ajax({
  url: 'fruits.json',
  dataType: 'json',
  success: function(data) {
   data.fruits.forEach(function(element) {
    if (allFruits.indexOf(element.name) === -1) {
     queue.push(['fruit', element.name]);
     allFruits.push(element.name);
    }
   });
   debug('checkFruits():', 'data =', data, 'allFruits =', allFruits, 'queue =', queue); 
  }
 });
}

getFruits();
setInterval(checkFruits, 5000);
// setInterval(getFruits, 10000); // When I try this, checkFruits() does not wait for getFruits() to finish.

The analogy of my actual remote resource is fruits.json. fruits.json can simply be the following: {"fruits":[{"name":"apple","color":"red"},{"name":"banana","color":"yellow"},{"name":"tangerine","color":"orange"}]}

Again, the actual, remote JSON changes independently.

Answer 1

your last code example first executes setInterval(functionA), and when the deferred execution of functionA is setup, executes setInterval(functionB), meaning that B will called +- 5 seconds after that line is executed, while functionA is called +- 10 seconds.

edit to reflect your additional information:

setInterval(function(){
   functionA();
   functionB();
}, 10000)

setTimeout(function(){
    setInterval(functionB, 10000)
}, 5000)

Answer 2

What you have here are two methods that each do asynchronouse stuff. Here are some good stack overflow posts on what that means.

Easy to understand definition of "asynchronous event"?

Does async programming mean multi-threading?

Are JavaScript functions asynchronous?

We have no idea how long it will take for an asynchronous call to finish. In your case, the AJAX request could take up to a few seconds depending on network speeds so regardless of when each of these methods are executed you CANNOT know which one will finish first. So what to do? Well, generally when you write/use an asynchronous method (like $.ajax) you give it a callback that will be executed when the asynchronous work is finished. And you have done this in the form of the success callback. And here is the good news. The success callbacks are SYNCHRONOUS (note the missing a). This means that the "useful code" in the success callback that needs to be run when a request finishes will complete (so long as none of it is async) before the "other useful code" in the other success callback is executed at all. And this works no matter which request finishes first. Each success callback will always wait for the other. So I think what was confusing you was your debug statements. If you add the following statements to your code the execution flow may make more sense:

debugging = true;

var debug = function() {
  if (debugging) {
    console.log.apply(console, arguments)
  };
}

var allFruits = [];
var queue = [];

var getFruits = function() {
  debug("getFruits: make request");
  $.ajax({
    url: 'fruits.json',
    dataType: 'json',
    success: function(data) {
      debug("getFruits: start processing");
      allFruits = []; // Empty the list
      data.fruits.forEach(function(element) {
        allFruits.push(element.name);
      });
      debug('getFruits: finished processing');
    },
  });
  debug("getFruits: request sent, now we wait for a response.");
}

var checkFruits = function() {
  debug("checkFruits: make request");
  $.ajax({
    url: 'fruits.json',
    dataType: 'json',
    success: function(data) {
      debug("checkFruits: start processing");
      data.fruits.forEach(function(element) {
        if (allFruits.indexOf(element.name) === -1) {
          queue.push(['fruit', element.name]);
          allFruits.push(element.name);
        }
      });
      debug("checkFruits: finished processing");
    }
  });
  debug("checkFruits: request sent, now we wait for a response.");
}

getFruits();
setInterval(checkFruits, 5000);
// setInterval(getFruits, 10000); // When I try this, checkFruits() does not wait for getFruits() to finish.

After thinking about it I believe the only reason things may not have been behaving as expected is because you're emptying the allFruits array outside of the callback. If you move it as I have done I would think everything should work fine.

Now, I don't know why you need to re-initialize the data since each time you make the request your getting the latest information but lets roll with it. Since both methods make the same request lets consolidate that into a single method. No need to duplicate code ;). And since all of your examples have the getFruits running twice as slow as the checkFruits we could easily add a counter to accomplish the same sequence of events like so:

    debugging = true;

    var debug = function() {
      if (debugging) {
        console.log.apply(console, arguments)
      };
    }

    var allFruits = [];
    var queue = [];
    var count = 0;

    var doOneThing = function(data) {
       //do stuff
    }
    
    var doAnotherThing= function(data) {
       //do other stuff
    }

    var requestFruits = function() {
      $.ajax({
        url: 'fruits.json',
        dataType: 'json',
        success: function(data) {
          // if count is even...or, do this every other time.
          if (count % 2 === 0) {
            count++;
            doOneThing(data);
          }
          // do this everytime
          doAnotherThing(data);
        },
      });
    }

    setInterval(requestFruits, 5000);

Hope this helps. Cheers.

Answer 3

This is a crude answer. I sense that callbacks can achieve this, but I am not sure how to code them, especially involving setInterval.

I create two global variables, getFruitsIsBusy = false and checkFruitsIsBusy = false. I create an IF for both getFruits() and checkFruits(). Here is getFruits():

var getFruits = function() {
 if (checkFruitsIsBusy) { // New
  setTimeout(getFruits, 100); // New
  return; // New
 
 } else { // New
  getFruitsIsBusy = true // New
  
  allFruits = []; // Empty the list
  debug('getFruits() start:', 'allFruits =', allFruits, 'queue =', queue);
  $.ajax({
   url: 'fruits.json',
   dataType: 'json',
   success: function(data) {
    data.fruits.forEach(function(element) {
     allFruits.push(element.name);
    });
    getFruitsIsBusy = false // New; in the success function
    debug('getFruits() end:', 'data =', data, 'allFruits =', allFruits, 'queue =', queue)
   },
  });
 }
}

If also using this paradigm for checkFruits(), it seems both functions will wait for each other to finish.

Answer 4

Based on an analysis of the timing of two functions (A and B), consider the following solution (Chionglo, 2016):

1. Keep state information for each of function A and function B. The state of each function should be set within each of the respective functions.

2. Create a wrapper function for each of function A and function B. The wrapper function calls on the respective function, and then checks for the state of the respective function.

   a. The check in wrapper function A: if function A has reached is final state, clear the interval associated with wrapper function A and schedule an interval for wrapper function B.

   b. The check in wrapper function B: if function B has reached its final state, clear the interval associated with wrapper function B.

3. To begin the process, schedule an interval for wrapper function A.

Sample code:

var ac = Math.round(4*Math.random())+4;
var bc = Math.round(6*Math.random())+6;
var ai;
var Astate = false;
var Bstate = false;

function A() {
  // Do your thing for A here.
  // The following changes the “state of A” and then determines if the final state has been reached.
  ac -= 1;
  if (ac<1) Astate = true;
  else Astate = false;
}

function B() {
  // Do your thing for B here.
  // The following changes the “state of B” and then determines if the final state has been reached.
  bc -= 1;
  if (bc<1) Bstate = true;
  else Bstate = false;
}

ai = setInterval("processA()", 1000);

function processA() {
  A();
  if (Astate) {
    clearInterval(ai);
    ai = setInterval("processB()", 500);
  }
}

function processB() {
  B();
  if (Bstate) {
    clearInterval(ai);
    ai = undefined;
  }
}

Reference

Chionglo, J. F. (2016). An analysis for timing a set of functions. Available at http://www.aespen.ca/AEnswers/1458200332.pdf.