Is it posible to implement functions that use non blocking setTimeout synchronically?

Question

I wonder if it is possible to call these 2 IIF synchronically that they produce at the end something like that?

######
#####
####
###
##
#
#
##
###
####
#####
###### ?

the functions below do delayed console log. The idea is to console log with some delay row by row.

 (function whileLoop(n) {
        setTimeout(function () {
            let hashArr = Array.apply(null, Array(n)).map(() => {
                return hashSymbol
            });
            console.log(hashArr);
            if (--n) whileLoop(n);
        }, 2000)
    })(6);

    (function whileLoop(n, m) {
        setTimeout(function () {
            let hashArr = Array.apply(null, Array(n)).map(() => {
                return hashSymbol
            });
            console.log(hashArr);
            if (n < m) {
                ++n;
                whileLoop(n, m);
            }
        }, 2000)
    })(1, 6);

there are lots of ways to do what you want but basically you have two options: 1. use a promise or some implementation with a callback function to invoke the second function after the first one completes. 2. use a variable in both functions' scopes to set a start condition for the second function. Without more specific information about your constraints, its hard to be more exact. — Will Reese, Feb 20 '20 at 04:23

score 2 · Answer 1 · answered Feb 20 '20 at 04:45

In order for you to display it one by one, you need to use async await. Please check here: https://javascript.info/async-await

 const row = 6;
    (async() => {
   for (let r = 1;r < row * 2; r++) {
     await displayAsync('#'.repeat((r >= 7 ? (r % 6) : row - r ) + 1));
   }
})();

function displayAsync(str) {
   return new Promise((resolve, reject) => {
      setTimeout(()=> {
       console.log(str);
       resolve(null); 
      }, 1000);
   });
}

score 1 · Answer 2 · answered Feb 20 '20 at 04:38

A typical way to handle the order of execution for two different asynchronous operations would be to use promises.

var d = $.Deferred();

(function whileLoop(n) {
  setTimeout(function () {
    let hashArr = Array.apply(null, Array(n)).map(() => {
      return '#'
    });
    console.log(hashArr);
    if (--n) whileLoop(n);
    else d.resolve();
  }, 2000)
})(6);

d.then(function() {
  (function whileLoop(n, m) {
    setTimeout(function () {
      let hashArr = Array.apply(null, Array(n)).map(() => {
        return '#'
      });
      console.log(hashArr);
      if (n < m) {
        ++n;
        whileLoop(n, m);
      }
    }, 2000)
  })(1, 6);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

score 0 · Answer 3 · answered Feb 20 '20 at 05:30

You are almost there. I see that you understand that the recursive call to setTimeout emulates a while loop asynchronously. And I see that you understand how to decide when to continue the "loop" and when to stop:

if (--n) whileLoop(n);

You just need to realize that the loop ends when the if condition is false. Thus, to run the second while loop just start it in the else:

if (--n) {
    whileLoop(n);
}
else {
    whileLoop2(1,6);
}

There's a few repercussions of this:

The second whileLoop must be re-written to NOT be an IIFE - it must be a regular function called at the end of the first whileLoop as above.
You cannot reuse the name whileLoop for both functions. To differentiate the functions you must rename either the first or second "loop" functions.

This preserves your current logic requiring only 4 lines to be changed to get the behavior you want.

Is it posible to implement functions that use non blocking setTimeout synchronically?

3 Answers3