Question

我认为我正在使用非常标准的设置。单击元素以调用处理ajax请求的函数。

在使用异步任何东西并试图找出jQuery deferreds时，我对变量范围和回调的理解有限，这让我的脑部受到了轻微的伤害。

$('<div>')
.on({
    click : function(){
        console.log(
            fetchMyData() // this will be 'undefined' but why?
        )
    }
})

function fetchMyData(){
    $.ajax({
        // ajax setup
    })
    .done(function(response){
        console.log( response ); // shows 'hello' as expected
        return response; 
    })
}

我知道ajax调用不一定要在我执行console.log（）时完成，因为它当然是异步的。

那么我怎样才能使fetchMyData()在准备就绪后显示ajax结果？

Answer 1

您应该更改fetchMyData函数的功能。尝试返回promise对象。

$('<div>').click(function()
{

    var fetchMyDataPromise  = fetchMyData() ;

    fetchMyDataPromise.done(function(response)
    {
        console.log(response);
    });

});

function fetchMyData()
{
    return  $.ajax({ // ajax setup });
}

Answer 2

那么我怎样才能使fetchMyData（）在准备就绪后显示ajax结果？

你已经在.done回调中完成了这项工作。如果您希望fetchMyData 返回响应，则必须使用同步调用，这通常不是正确的事情（因为UI将冻结，直到响应到达）。 / p>

也许你想修改你的函数来进行回调：

function fetchMyData(thenDoThis){
    $.ajax({
        // ajax setup
    }).done(thenDoThis)
}

function doSomethingWithResponse(response) {
    // do something
}

然后这样称呼：

fetchMyData(doSomethingWithResponse);

或者像这样：

$('<div>').click(function() {
    fetchMyData(function(response){
        console.log(response);
    });
});

Answer 3

你可以像这样使用jQuery：

$('<div>')
    .on({
        click : function() {

           $.when(fetchMyData()).then(function(data) {
                    console.log(data);
           });
         }
    });

    function fetchMyData(){
        return $.ajax({
            // ajax setup
        });
    }

在jQuery中使用deferred / ajax的变量范围

3 个答案: