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
    }

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

3 个答案: