嵌套for循环，每个循环单独延迟

Question

简单的嵌套for循环示例：

for (let i=0; i<=2; i++) {
  for (let j=0; j<=1; j++){
    console.log("i is: " + i);
    console.log("j is: " + j);
    console.log("---");
  }
}

有延迟的嵌套for循环：

for (let i=0; i<=2; i++) {
  for (let j=0; j<=1; j++){
    task(i,j);
  }
} 

function task(i,j) { 
  setTimeout(function() { 
    console.log("i is: " + i);
    console.log("j is: " + j);
    console.log("---")
  }, 1000 * i);
}

现在我的问题是

如何分别延迟每个循环。

当前输出（忽略“---”）：

i，j，延迟，i，j，延迟，...

期望的输出（忽略“---”）：

i、延迟、j、延迟、i、延迟、j、延迟...

我尝试了类似下面的方法（但它返回了一个完全错误的输出）

for (let i=0; i<=2; i++) {
  for (let j=0; j<=1; j++){
    taski(i);
    taskj(j)
  }
} 

function taski(i) { 
  setTimeout(function() { 
    console.log("i is: " + i);
  }, 1000 * i);
}
function taskj(j){
  setTimeout(function() { 
    console.log("j is: " + j);
    }, 1000 * j);
}

Answer 1

您可以使用Promise 和async/await 来处理顺序调用

function taski(i) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log("i is: " + i)
      resolve()
    }, 1000 * i)
  })
}
function taskj(j) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log("j is: " + j)
      resolve()
    }, 1000 * j)
  })
}

async function execute() {
  for (let i = 0; i <= 2; i++) {
    for (let j = 0; j <= 1; j++) {
      await taski(i)
      console.log("delay")
      await taskj(j)
      console.log("delay")
    }
  }
}

execute()

---

参考：

• async function
• Promise

Answer 2

好的，setTimeout 在它自己的世界中工作，不受 for 循环或任何其他代码的限制，它实际上根本不会“阻塞”当前代码，在你的 for 循环中只是设置了一堆间隔，一个接一个地非常快（因为 for 循环不会停止或被超时延迟），当每个单独的时间用完时，它会以某种未知的顺序执行，这没有被阻止或依赖于任何其他超时

如果您想保持与现在相同的格式，但使用延迟阻塞，您可以使用 await 和 promises 以及 async 函数

(async () => 
for (let i=0; i<=2; i++) {
  for (let j=0; j<=1; j++){
    await taski(i);
    await taskj(j)
  }
} 
)()
function taski(i) { 
  return new Promise((rs) => setTimeout(function() { 
    res(console.log("i is: " + i));
  }, 1000 * i));
}
function taskj(j){
    return new Promise((rs) => setTimeout(function() { 
    res(console.log("j is: " + j)
    }, 1000 * j));
}

Answer 3

您可以尝试使用 async/await 的异步方法：

function sleep(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

(async function() {
  for (let i = 0; i <= 2; i++) {
    for (let j = 0; j <= 1; j++) {
      await taski(i);
      await taskj(j);
    }
  }
}())

async function taski(i) {
  await sleep(1000 * i);
  console.log("i is: " + i);
}
async function taskj(j) {
  await sleep(1000 * j);
  console.log("j is: " + j);
}