是否可以实现同步使用非阻塞setTimeout的函数？

Question

我想知道是否可以同时调用这两个IIF，它们最终会产生类似的结果？

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

以下功能会延迟控制台日志。这个想法是逐行控制台控制台，但有一些延迟。

 (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);

Answer 1

为了让您一一显示它，您需要使用async await。请在这里检查：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);
   });
}

Answer 2

处理两个不同的异步操作的执行顺序的典型方法是使用promise。

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>

Answer 3

您快到了。我知道您了解对setTimeout的递归调用会异步模拟while循环。而且我知道您了解如何决定何时继续“循环”以及何时停止：

if (--n) whileLoop(n);

您只需要意识到当if条件为false时，循环结束。因此，要运行第二个while循环，只需在else中启动它即可：

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

对此有一些影响：

1. 第二个whileLoop必须通过IIFE重写为NOT-它必须是如上所述在第一个whileLoop的结尾处调用的常规函数​​。

2. 您不能将名称whileLoop重用于两个功能。要区分功能，必须重命名第一个或第二个“循环”功能。

这将保留您当前的逻辑，只需更改4行即可获得所需的行为。