javascript中的同步和异步循环

Question

JavaScript 中的循环是同步的还是异步的？ （对于，同时等）

假设我有：

for(let i=0; i<10; i++){
    // A (nested stuff...)
}

// B ...

使用for，B 的执行有时会在A 之前开始......（所以异步）

有没有办法以同步方式使用语句？

Answer 1

在所有异步操作开始时，for 循环会立即运行完成。

好吧，这里我们有一些嵌套循环。请注意，“BBB”总是在之后触发。

for(let i=0; i<10; i++){
   for(let i=0; i<10; i++){
     for(let i=0; i<10; i++){
       console.log("AA")
     }
   }
}

console.log('BBB')

现在，看看这个

for(let i=0; i<10; i++){
   setTimeout(function() {console.log("AA")}, 2000)
}

console.log('BBB')

这是因为所谓的“事件循环”。事实上，使用那个 setTimeout 我们正在模拟一个异步操作。它可能是一个 ajax 调用或其他一些异步进程。

看看这个：http://latentflip.com/loupe

这将真正帮助您理解这些异步/同步循环主题。

已更新以显示 Promise 在这里的工作方式（给定下面的 cmets）：

var stringValues = ['yeah', 'noooo', 'rush', 'RP'];
var P = function(val, idx){
    return new Promise(resolve => setTimeout(() => resolve(val), 1000 * idx));
};


// We now have an array of promises waiting to be resolved.
// The Promise.all basically will resolve once ALL promises are 
// resolved. Keep in mind, that if at any time something rejects
// it stops

// we iterator over our stringValues array mapping over the P function, 
// passing in the value of our array.
var results = Promise.all(stringValues.map(P));

// once all are resolved, the ".then" now fires. It is here we would do 
results.then(data => 
    console.log(data) //["yeah", "noooo", "rush", "RP"]
);

如果我不够清楚，请告诉我。

Answer 2

如果您将异步循环放置在 for...loop 中并希望在每个操作结束之前停止循环，则必须使用 async/await 这样的语法。

async function foo() {
    var array = [/* some data that will be used async*/]

    //This loop will wait for each next() to pass the next iteration
    for (var i = 0; i < array.length; i++) { 
        await new Promise(next=> {
            someAsyncTask(array[i], function(err, data){
                /*.... code here and when you finish...*/
                next()
            })
        })        
    }
}

foo().then(() => { /*After foo execution*/ })

Answer 3

let items = YourArray;
let i = 0;
await new Promise(async (resolve, reject) => {
    try {
        if (items.length == 0) return resolve();
        let funSync = async () => {
            await yourASyncFunctions(items[i].doAnything);
            i++;
            if (i == items.length) resolve();
            else funSync();
        }
        funSync();
    } catch (e) {
        reject(e);
    }
});

Answer 4

首先，您关于“用于执行 B 的声明有时会在 A 之前开始......（所以异步）” 是错误的。

Javascript中的循环函数（如while、for、.forEach或.map）将同步运行（阻塞)，无论你是在 Browser 还是在 NodeJS 之类的 Runtime Environment 中运行它。我们可以通过运行下面的代码来证明这一点（这个过程可能需要几秒钟）：

let counter1 = 0
let counter2 = 0
let counter3 = 0

console.log("Start iteration")
console.time("Time required")

// First heavy iteration
for (let i = 0; i < 1000; i++) {
  counter1 += 1

  // Second heavy iteration
  for (let i2 = 0; i2 < 1000; i2++) {
    counter2 += 1

    // Third heavy iteration
    for (let i3 = 0; i3 < 1000; i3++) {
      counter3 += 1
    }
  }
}

console.log("Iteration was successful")
console.timeEnd("Time required")
console.log('The value of `counter1` is: ' + counter1)
console.log('The value of `counter2` is: ' + counter2)
console.log('The value of `counter3` is: ' + counter3)

那么什么样的循环会导致你的代码异步运行（非阻塞）？

答案是：

放置在Promise callback 或function 中的代码带有async 关键字或带有callback（不是全部）的一些本机函数，例如setTimeout、setInterval 和 etc 将异步运行。

例子：

setTimeout(() => {
  console.log('A')
})

console.log('B')

在代码中，setTimeout 函数首先被声明。但是，代码的输出显示console.log('B') 函数比setTimeout 函数运行得更早。

Answer 5

for(const elment of arrayElements) {
            await yourFunc(elment)
            await yourOtherFunc('somePatameter')
}