Question

我很擅长使用JS编程并从Node开始。我一直在使用异步模块在后端与数据库一起处理异步代码。我应该用什么来处理前端的异步代码。我有以下检查图像数组，以查看它们是否加载。

$(document).ready(function () {
    var images = <%- JSON.stringify(images) %>;

    var imagesNotLoading = [];
    images.forEach(function (image) {
        if(!imageLoads(image)) {
           imagesNotLoading.push(image)
    });
    console.log(imagesNotLoading);

    //returns true if image loads successfully
    function imageLoads(src) {
        var img = new Image();
        img.onload = function() {
            return true;
        };
        img.onerror = function() {
            return false;
        };
        img.src = src;
    }
});

imageLoads函数将返回undefined或！undefined，这是真的。在将函数推送到imagesNotLoadingArray之前，我应该使用什么来等待函数返回true或false。任何帮助表示赞赏。

Answer 1

您应该在错误处理程序上编写imagesNotLoading数组。

var images = <%- JSON.stringify(images) %>;

var imagesNotLoading = [];
images.forEach(function (image) {
    imageLoads(image)
});

//returns true if image loads successfully
function imageLoads(src) {
    var img = new Image(src);
    img.onload = function() {
        successFunction(img);
    };
    img.onerror = function() {
        errorFunction(img);
    };
    img.src = src;
}

function errorFunction(img){
    imagesNotLoading.push(img.src);
}
function successFunction(img){
    console.log("Image "+img.src+" was loaded successful!");
}

Answer 2

如果您正在使用带有节点的async-library，则没有理由不在浏览器中使用相同的代码来处理异步代码。只要加载异步库的浏览器版本，就可以使用其async.parallel(...)函数来检查哪些图像正在加载，哪些不加载。

除此之外，您可能需要查看promises，因为它们极大地简化了Javascript中异步代码的处理 - 无论是在前端还是后端。

使用promises，您的代码看起来像

$(document).ready(function () {
   var images = <%- JSON.stringify(images) %>;

   var imagesNotLoading = [];
   images.forEach(function (image) {
      imageLoads(image).then(function(){}, function() {
         imagesNotLoading.push(image);
      });
   });

   // returns true if image loads successfully
   function imageLoads(src) {
      var img = new Image();
      return new Promise(function(resolve, reject) {
         img.onload = resolve;
         img.onerror = reject;
         img.src = src;
      });
   }
});

这将等待所有图像加载或出错并随后执行回调。由于onload和onerror函数在将来的某个时间执行，而你还不知道什么时候会发生这种情况，你最好有承诺来处理图像加载的结果。

处理前端的异步代码

2 个答案: