Question

我有一个从API中提取图像的功能，可以将它们插入到动画卷轴中。它看起来像这样（为简洁起见而简化）：

function getPhotos(id) {
    $.when(Service.getPhotos(id))
        .then(function(results) {
            var photos = results.photos,
                scroller = $("#scroller");

            // Add the photos to the scroller
            for (var i = 0; i < photos.length; i++) {
                var photo = photos[i].url;

                // Only add a photo if its URL is valid
                if (photoExists(photo) == 200) {
                    scroller.append("<li><img src='" + photo + "' /></li>");    
                } else {
                    console.log("Photo " + photo + " doesn't exist");
                }
            }
        })
        .fail(function(err) {
            console.log(err);
        });
}

但是，照片网址并不总是解析为有效图片，所以我通过photoExists()函数运行它们：

function photoExists(photo) {
    var http = jQuery.ajax({
        type: "HEAD",
        url: photo,
        async: false
    });

    return http.status;
}

如果给定的照片网址返回的状态代码为200，那么我知道该图片存在并将其插入到滚动条中;否则，我会跳过它，这样我就不会插入破损的图像。

这里的问题是async: false - 因为这不是异步的，整个用户界面会锁定，直到一切都完成，这可能需要很长时间，具体取决于我必须循环的照片网址数量。< / p>

但是，如果我使用async: true，那么photoExists()函数会在AJAX请求本身实际完成之前尝试返回状态代码 - 因此photoExists(photo)永远不会返回200，导致没有任何内容被添加到滚动条。

如何调整此值以便photoExists()可以异步运行，从而避免锁定UI，但仍会返回正确的状态代码，以便我可以将照片正确插入卷轴？

Answer 1

您需要为photoExists功能提供回调功能。像这样：

function photoExists(photo, callback) {
    var http = jQuery.ajax({
        type: "HEAD",
        url: photo,
        async: true,
        success: function(){
            callback(photo, true);
        },
        error: function(){
            callback(photo, false);
        }
    });
}

然后像这样使用它：

for (var i = 0; i < photos.length; i++) {
    var photo = photos[i].url;

    // Only add a photo if its URL is valid
    photoExists(photo, function(photo, isSuccessful){
        if (isSuccessful) {
            scroller.append("<li><img src='" + photo + "' /></li>");    
        } else {
            console.log("Photo " + photo + " doesn't exist");
        }
    });
}

为回调函数添加了照片，以避免for循环可能出现的闭包问题

如何将此函数重写为异步？

1 个答案: