JavaScript: execute async function one by one

Question

I have a simple "async" JS function:

function asyncFunc(i) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

if I want to execute this asyncFunc 5 times in a for loop, i.e. log 1 - 5 per second, and totally costs 5 seconds.

1

2

3

4

5

I know jQuery's when().done() can do that however if I am in a environment with NO 3rd party JS libraries, what is the simplest and elegant way to achieve this?

Actually for example I want to write a util function which accepts an array of async functions, and this util function can execute passed in functions one by one:

function execAsyncTasks([asyncTask1, asyncTask2, asyncTask3]) {
    asyncTask1();
    // Wait until asyncTask1 finished
    asyncTask2();
    // Wait until asyncTask2 finished
    asyncTask3();
    // Wait until asyncTask3 finished
}

you can give add a callback parameter to your async methods you call on timeout! — silly
– silly, Commented Nov 27, 2012 at 11:33
The beginning of your post suggests that you want "time scheduling" and the later example suggest that you just want to perform tasks 1 after another?! — EricG
– EricG, Commented Nov 27, 2012 at 11:48
If each task has to wait until the previous one finishes, then they are not "stand alone" async task. You can just "wrap" them in a normal for and "asyncly" run the "wrapper" using your already-ready async method. — Passerby
– Passerby, Commented Nov 27, 2012 at 11:59

David Hedlund · Accepted Answer · 2012-11-27 11:47:42Z

9

All your tasks will have to implement some sort of callback mechanism, because that's the only way you'll ever know that an asynchronous task has been completed. Having that, you could do something like:

function executeTasks() {
    var tasks = Array.prototype.concat.apply([], arguments);
    var task = tasks.shift();
    task(function() {
        if(tasks.length > 0)
            executeTasks.apply(this, tasks);
    });
}

executeTasks(t1, t2, t3, t4);

Demo

answered Nov 27, 2012 at 11:47

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wayne Ye Over a year ago

NEAT! This is what I want, relatively simple, no 3rd party, thank you!

luin · Accepted Answer · 2012-11-27 11:35:13Z

2

You can use Async module:

https://github.com/caolan/async

async.parallel([
    function(){ ... },
    function(){ ... }
], callback);

async.series([
    function(){ ... },
    function(){ ... }
]);

answered Nov 27, 2012 at 11:35

luin

1,9952 gold badges20 silver badges25 bronze badges

Comments

Jim Blackler · Accepted Answer · 2012-11-27 11:38:01Z

0

This is one approach of many

function execAsyncTasks(asyncTask1, asyncTask2, asyncTask3) {
  var count = 0;

  function nextCommand() {
    switch (count) {
      case 0:
        asyncTask1();
        break;
      case 1:
        asyncTask2();        
        break;
      case 2:
        asyncTask3();
      default:
        return;
    }
    count++;
    setTimeout(nextCommand, 1000);
  }
  nextCommand();
}

answered Nov 27, 2012 at 11:38

Jim Blackler

23.3k12 gold badges90 silver badges101 bronze badges

3 Comments

Bruno Over a year ago

The problem with this is that the count variable is incremented whether the function has finished or not. Ideally the asyncTask when completed would increment the count variable.

Wayne Ye Over a year ago

Actually I was using one approach and I suppose is better than this one:

Wayne Ye Over a year ago

var counter = 0; for(var i = 0;i < 5;i++) { setTimeout(function () {}, counter++ * 1000); }

Anshuman · Accepted Answer · 2018-10-07 16:06:44Z

0

you can have a sync mechanism using callbacks and recursive function calls: see http://jsfiddle.net

function asyncFunc(i, callback) {
  setTimeout(function() {
    document.body.innerHTML += '<p>' + i + '</p>';
    callback();
  }, 1000);
}

var args = [0, 1, 2, 3, 4];

function loopThroughArgs(callback) {
  if (args.length == 0) {
    callback();
  } else {
    asyncFunc(args[0], function() {
      args.splice(0, 1); //remove the first item from args array
      loopThroughArgs(callback);
    });
  }
}

loopThroughArgs(function() {
  document.body.innerHTML += '<p>done !</p>';
});

edited Oct 7, 2018 at 16:06

Anshuman

8231 gold badge9 silver badges24 bronze badges

answered Nov 27, 2012 at 11:52

Alex Pacurar

5,8814 gold badges28 silver badges33 bronze badges

Collectives™ on Stack Overflow

JavaScript: execute async function one by one

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related