asyncLoop function

by Jose Montero

HTML

<div id="process">

</div>

CSS

body{
  font-family: Arial;
}

JavaScript

(function ready() {
    if (!document.body) {setTimeout(ready, 50); return;}
    
  function promise1(param){
    return new Promise((resolve, reject) => setTimeout(() => { resolve("<strong>Done&#10004;</strong>")}, 2000))
  }


  function asyncLoop(iterations, func, callback) {
      var index = 0;
      var done = false;
      var loop = {
          next: function() {
              if (done) {
                  return;
              }

              if (index < iterations) {
                  index++;
                  func(loop);

              } else {
                  done = true;
                  callback();
              }
          },

          iteration: function() {
              return index - 1;
          },

          break: function() {
              done = true;
              callback();
          }
      };
      loop.next();
      return loop;
  }

	var asyncProc = ["Process1", "Process2", "Process3"];
	var elProcess = document.querySelector("#process");
  
	asyncLoop
	(
		asyncProc.length,
  	(loop) =>
    { 	
  		elProcess.insertAdjacentHTML('beforeend', '<div id="asyncproc">Processing '+asyncProc[loop.iteration()]+'...<span id="'+asyncProc[loop.iteration()]+'"></span></div>');
    	promise1(asyncProc[loop.iteration()]).then((msg) =>{ 
      var elResult = document.querySelector("#"+asyncProc[loop.iteration()]);
      elResult.insertAdjacentHTML("afterbegin", msg); console.log(msg); loop.next() })
    },
  	() => { 
    	elProcess.insertAdjacentHTML('afterend', "**** All processes completed! *****");
    	console.log("ALL DONE!")}
 	); 
 
})();