0

画像ディレクトリに利用可能なファイルがあるかどうかを確認するために ajax を使用しています。存在する場合は、それを HTML コードに追加し、ブール値を true に変更して、見つかったことをユーザーに知らせます。ファイル名が見つからない場合は、2 つの部分からなる画像かどうかを確認します (画像名の末尾の数字 1 と 2 を連結して 2 つの画像を生成します)。画像が見つかったことを示すブール値も true に変更されます。ただし、1 つまたは 2 つの部分からなる画像がない場合、コードは 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 呼び出しが戻るのを待ちません。

この問題を解決するには 2 つのオプションがあります。成功/エラー コールバックを使用するか、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
}
于 2013-01-07T16:46:31.993 に答える