嵌套for循环，每个循环分别延迟 参考：

问题描述

简单的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 (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);
}

解决方法

您可以使用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

,

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

如果您希望保持与现在相同的格式，但是有延迟阻止，则可以使用await，promise和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));
}

,

您可以尝试使用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);
}