javascript处理多个回调互斥对象

Question

我对javascript还不陌生。假设我有以下代码。

let sources =["http://localhost:3001/resources/black_bish",""http://localhost:3001/resources/white_bish""]
let loaded_images=0
sources.forEach(ele = > {
    let img = new Image()
    img.src = ele
    img.onload = function () {
        loaded_images=++
    }
})

这里我有一个关于Javascript和并发的问题。不能像在使用线程时一样，同时调用这两个回调吗？在这里，会不会有比赛条件？如果我要执行的操作不同于“ loaded_images = ++”，是否有竞争条件，例如操纵我应该担心的数据结构？

谢谢

Answer 1

一种方法是为您加载的每个图像返回一个Promise。此承诺将

解决，或者用外行的方式：只要加载了图像，在满足正确的条件时继续执行。就像Promise语句一样，但是您不必继续执行下一步，而是继续执行下一步。

return是promise构造函数上的一个方法，它接受一个promise数组。当数组中的所有promise已被

fullfilled

（表示已调用[C​​0]）时，请对所有promise的值进行处理。Promise.all

另一个例子是将诺言与Promise.all / resolve语法结合使用，这会暂停执行直到您等待的诺言得到满足。
例如，在上一个图像被加载后，一个接一个地加载图像。
const loadImage = (source) => new Promise(resolve => {
  let img = new Image();
  img.onload = function() {
    resolve(img);
  };
  img.src = source;
});

const whenAllImagesAreLoaded = (...sources) => Promise.all(
  sources.map(source => loadImage(source));
);

whenAllImagesAreLoaded('image-1.jpg', 'image-2.jpg').then((images) => {
  images.forEach(image => {
    console.log(image, ' is loaded');
  });
});

这两种方法都可以更好地控制如何处理比赛条件，或者完全消除它们。我建议您尽可能多地实践诺言。它是您JavaScript工具箱中非常强大的工具。
如果有任何疑问，请告诉我。