通过jQuery ajax检查图像是否存在？

Question

该脚本使用API​​来访问数据库中的信息，并为数据库中的随机人显示“聚光灯”，其中包括他们的姓名，照片和简短的简历。

我正在尝试编写此脚本来检查图像是否存在。 如果图像存在，则脚本应继续，但如果图像不存在（404错误），则应重新滚动并再次检查。 我在理解如何使用ajax的异步部分时遇到问题。

        function checkImage(imgurl){
           function headRequest(url){
               return $.ajax({  //Makes a HEAD request for the image
                   url: url,
                   type: 'HEAD'
               });
            };
            headRequest(imgurl)
            .done(function(){
                return true; //image exists
             })
            .fail(function(){
                return false; //HEAD request returns 404
             });
        };

    //if image does not exist or person.biography is undefined, reroll
    while (!checkImage(imgsrc) || person.biography == undefined) {
        //select random person
    }

Answer 1

要使用回调！ （您无法从async调用返回）

function checkImage(imgurl, callback){
       function headRequest(url){
           return $.ajax({  //Makes a HEAD request for the image
               url: url,
               type: 'HEAD'
           });
        };
        headRequest(imgurl)
        .done(function(){
            callback(true); //image exists
         })
        .fail(function(){
            callback(false); //HEAD request returns 404
         });
 };

并调用函数：

checkImage(imgsrc, function(exists) {
    //exists is what you passed into the callback
    if (exists) { //do stuff

    } else {
        //doesnt
    }
});

Answer 2

function checkImage(imgurl, callback){
       function headRequest(url){
           return $.ajax({
               url: url,
               type: 'HEAD'
           });
        };
        headRequest(imgurl)
        .done(function(){
            //Do whatever you wanted to do after it successfully found
            callback(imgurl);
         })
        .fail(function(){
            var newRandom = GetNewRandom(): //get your new random person url
            checkImage(newRandom, callback);  //Try again
         });
    };

因此，通过这种方式，它会不断迭代调用，直到找到匹配项为止。 例如，也许它将像这样运行：

var firstPerson = GetNewRandom();  //Initial person
function myCallback(url) {
    $('#myImage').attr('src', url);  //Change src to successful image
}
checkImage(firstPerson, myCallback); //starting with this person, look for a match

Answer 3

因此，我最终将异步部分设置为false。 我知道这不是一个好习惯，但这是临时的最佳解决方案。

    function checkImage(imgurl){
        function headRequest(url){
            var http = $.ajax({
                url: url,
                type: "HEAD",
                async: false
            })
            return http.status;
        }
        if(headRequest(imgurl) == 200) {
            return true;
        }
        else {
            return false;
        }
    }
    //if image does not exist or person.biography is undefined, reroll
    while (!checkImage(imgsrc) || person.biography == undefined) {
        //reroll
    }