是否有可能实现同步使用非阻塞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

处理两个不同异步操作的执行顺序的典型方法是使用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>

​

Answer 3

你就快到了。我知道您理解对setTimeout的递归调用异步地模拟while循环。我看到你知道如何决定什么时候继续“循环”，什么时候停止：

if (--n) whileLoop(n);

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

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

这有一些影响：

1. 第二个whileLoop必须重写为，而不是，它必须是在第一个whileLoop结束时调用的常规函数，如上所述。
2. 您不能同时对两个函数重复使用名称whileLoop。要区分这些函数，必须重命名第一个或第二个“循环”函数。

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