嵌套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, delay, j, delay, i, delay, j, delay ...

我尝试了如下的操作（但它返回了一个完全错误的输出）

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

参考：

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

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

Nested for loop,delay on each loop individually

javascript

for-loop

settimeout

参考：