javascript - 如何使用 AJAX 使变量与函数的结果相等

Question

我正在尝试从运行函数的 ajax 调用中设置一个变量。下面的代码在控制台日志中返回 imgurlthumbvar，将 alert(test) 表示为未定义。我做了一些研究，发现它与 AJAX 异步有关。谁能帮忙。提前致谢！

        function displayimg(id2){
        $.ajax({
        url:'getphotos.php',
        type:'POST',
        dataType: "JSON",
        data:{id2:id2},
        success: function(result){
            $.each(result, function(){
                imgurlvar = this.imgurl;
                imgurlthumbvar = this.imgurlthumb;
                console.log(imgurlthumbvar)
                //console.log('test')
                return imgurlthumbvar 
            })
        }
        });
    }

    $('#test123').click(function(){
        var test = displayimg(7)
        alert(test)
    })

标签： javascriptajaxfunctionvariables

Answer 1

尝试

function displayimg(id2) {
    return $.ajax({
        url: 'getphotos.php',
        type: 'POST',
        dataType: "JSON",
        data: {
            id2: id2
        }
    });
}
// AJAX returns a promise


$('#test123').click(async function(){
    var result = await displayimg(7); // result is AJAX response
    var test;
    $.each(result, function(){
        imgurlvar = this.imgurl;
        imgurlthumbvar = this.imgurlthumb;
        console.log(imgurlthumbvar)
        //console.log('test')
        test = imgurlthumbvar 
    })

    alert(test)
});

await使异步调用看起来和行为类似于同步，但实际上并没有使其同步（由于 UI 冻结问题，不鼓励同步调用