0

我正在使用 ajax 来检查我的图像目录中是否有可用的文件。如果它在那里，我将它附加到我的 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 }));
        }
});

}

我知道这可能是我不了解此功能的详细信息及其工作原理，但是如果有人可以帮助解决此问题或提出更好的方法来解决此问题，那基本上就是我正在寻找的。提前致谢。

4

1 回答 1

0

为什么 AJAX 叫异步？

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

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

打回来：

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
}
于 2013-01-07T16:46:31.993 回答