Question

我正在使用ajax检查我的image目录中是否有可用的文件。如果它存在，我将它附加到我的html代码，并将布尔值更改为true，让用户知道它已找到。如果找不到文件名，我会检查它是否是一个2部分图像（在图像名称的末尾对数字1和2进行汇总并生成2个图像）。布尔值也更改为true，表示找到了图像。虽然如果没有单个或两个部分的图像，代码应该只是从ajax中出错，将布尔值保留为false，告诉用户没有图像。

我的逻辑在除了在没有图像时通知用户之外的一切都很好。在ajax成功函数中，图像总是附加（无论成功还是错误），但布尔值在成功后永远不会改变。这是我正在运行的代码。

boolean = false  //declared globally
function tableSelect(location){
    $("#popupPhoto").text("");

var part = $("#table"+location).text().split(" ");

//part[0] always empty
for(var i=1;i<part.length;i++){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    //change default value to false
    boolean = false;
    /* original code
    imageExists(part[i]);

    //when no file... is found, boolean stays false, causing this if statement to function
    if(boolean == false){
        alert("No Information for "+imagename+" of "+part[i]); 
            //displayes image that says "No Information Available"
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/nia.png', "class": 'popphoto', alt: 'NIA' }));
    }
*/
    //new code
    imageExists(part[i]).fail(function () {
    alert("No Information for "+imagename+" of "+part[i]); 
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/nia.png', "class": 'popphoto', alt: 'NIA' }));
    })

}//Displays images in popup
$("#popupPhoto").addClass("ui-popup-active");}

这是检查图像的功能

function imageExists(part){
var url = "images/imagedir/"+part+".png";
$.ajax({
        url:url,
        type:'HEAD',
        error: function()
        {
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/'+part+'1.png', "class": 'popphoto', alt: part.concat("1") }));
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/'+part+'2.png', "class": 'popphoto', alt: part.concat("2") }));
            //boolean = true;
            //boolean changes here
        },success: function()
        {//boolean will not change here
            //boolean = true;
            $("#popupPhoto").append($("<img>", {src: 'images/imagedir/'+part+'.png', "class": 'popphoto', alt: part }));
        }
});

}

我理解这可能是我不理解这个功能的细节以及它是如何工作的，但是如果有人可以帮助解决这个问题或建议一个更好的方法来实现它，那基本上就是我在寻找的东西。提前谢谢。

Answer 1

Why is AJAX called asynchronous?

在调用imageExists之后，您的代码会在ajax调用触发后立即运行。它不会等待ajax调用返回。

您有两种方法可以解决此问题;使用success / erorr回调或使用promise。在任何一种情况下，都不需要全局布尔值，并且应该删除该变量。

回调：

function imageExists(part){
...
    $.ajax({
        ...
        error: function () {
            // move the boolean == false code in to the error handler
        },
        success: function() {
            // move the boolean == true code in to the success handler
        }
    });
}

无极：

imageExists(part[i]).then(function () {
    // move the boolean == true code in to the then handler
}).fail(function () {
   // move the boolean == false code in to the failhandler
}

Ajax filecheck在成功时不会更改变量

1 个答案: