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

为了逐个显示它，您需要使用asyncawait。请在此处查看：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必须重写为NOT是IIFE-它必须是在第一个whileLoop末尾调用的正则函数，如上所述。

2. 不能对两个函数都重复使用名称whileLoop。要区分函数，必须重命名第一个或第二个"循环"函数。

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