0

我有一个从 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);
        });
}

但是，照片 URL 并不总是解析为有效图像，因此我通过photoExists()函数运行它们：

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

    return http.status;
}

如果给定的照片 URL 返回状态码200，那么我知道该图像存在并将其插入到滚动条中；否则，我会跳过它，以免插入损坏的图像。

这里的问题是async: false——因为这不是异步的，所以整个 UI 都会锁定，直到一切都完成，这可能需要很长时间，具体取决于我必须循环遍历多少照片 URL。

但是，如果我使用async: true，则该photoExists()函数会在 AJAX 请求本身实际完成之前尝试返回状态代码 - 所以photoExists(photo)永远不会返回200，从而不会将任何内容添加到滚动条中。

我将如何调整它以便photoExists()可以异步运行，从而避免锁定 UI，但仍然返回正确的状态代码，以便我可以将照片正确插入到滚动条中？

4

1 回答 1

2

您需要为您的函数提供回调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 循环可能出现的关闭问题

于 2013-09-25T15:25:32.080 回答