Javascript jQuery中带有deferred/ajax的变量作用域

我想我使用的是相当标准的设置。单击元素以调用处理ajax请求的函数

当我使用异步任何东西并试图弄清楚时，我对变量范围和回调的理解有限，这让我虚弱的大脑受到伤害

$('<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; 
    })
}

$（“”）
.在({
单击：函数（）{
console.log(
fetchMyData（）//这将是“未定义的”，但为什么？
)
}
})
函数fetchMyData（）{
$.ajax({
//ajax设置
})
.完成（功能（响应）{
console.log（response）；//按预期显示“hello”
返回响应；
})
}

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

那么，如何使

fetchMyData（）

在准备好后显示ajax结果呢

那么，如何使fetchMyData（）在准备就绪后显示ajax结果呢

您已经在

.done

回调中这样做了。如果希望

fetchMyData

返回响应，则必须使用同步调用，这通常不是正确的做法（因为在响应到达之前，UI将冻结）

---

可能需要修改函数以接受回调：

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

function doSomethingWithResponse(response) {
    // do something
}

那么就这样称呼它：

fetchMyData(doSomethingWithResponse);

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

或者像这样：

fetchMyData(doSomethingWithResponse);

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

$（“”）。单击（函数（）{
fetchMyData（函数（响应）{
控制台日志（响应）；
});
});

那么，如何使fetchMyData（）在准备就绪后显示ajax结果呢

您已经在

.done

回调中这样做了。如果希望

fetchMyData

返回响应，则必须使用同步调用，这通常不是正确的做法（因为在响应到达之前，UI将冻结）

---

可能需要修改函数以接受回调：

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

function doSomethingWithResponse(response) {
    // do something
}

那么就这样称呼它：

fetchMyData(doSomethingWithResponse);

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

或者像这样：

fetchMyData(doSomethingWithResponse);

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

$（“”）。单击（函数（）{
fetchMyData（函数（响应）{
控制台日志（响应）；
});
});

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

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

    var fetchMyDataPromise  = fetchMyData() ;

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

});

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

$（“”）。单击（函数（）
{
var fetchMyDataPromise=fetchMyData（）；
fetchMyDataPromise.done（函数（响应）
{
控制台日志（响应）；
});
});
函数fetchMyData（）
{
返回$.ajax（{//ajax setup}）；
}  

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

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

    var fetchMyDataPromise  = fetchMyData() ;

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

});

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

$（“”）。单击（函数（）
{
var fetchMyDataPromise=fetchMyData（）；
fetchMyDataPromise.done（函数（响应）
{
控制台日志（响应）；
});
});
函数fetchMyData（）
{
返回$.ajax（{//ajax setup}）；
}  

您可以在以下情况下使用jQuery：

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

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

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

$（“”）
.在({
单击：函数（）{
$.when（fetchMyData（））.then（函数（数据）{
控制台日志（数据）；
});
}
});
函数fetchMyData（）{
返回$.ajax({
//ajax设置
});
}

您可以在以下情况下使用jQuery：

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

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

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

$（“”）
.在({
单击：函数（）{
$.when（fetchMyData（））.then（函数（数据）{
控制台日志（数据）；
});
}
});
函数fetchMyData（）{
返回$.ajax({
//ajax设置
});
}

您想做什么

fetchMyData（）

记录为

undefined

，因为它不返回任何内容。您避免使用

.done（）

？返回

done

回调中的任何内容实际上没有任何作用。您可以在

fetchMyData

函数中使用

return$.ajax（{…

）。然后在单击处理程序中，使用

fetchMyData.done（function（）{console.log（“foo”）；}）；

将显示返回语句当前所在位置的结果的代码放入其中……您想做什么？

fetchMyData（）

记录为

未定义

，因为它不返回任何内容。您是否有理由避免

.done（）

？在

完成

回调中返回任何内容实际上都不会产生任何效果。您可以使用

返回$.ajax({…

在

fetchMyData

函数中。然后在单击处理程序中，使用

fetchMyData.done（函数（）{console.log（“foo”）；}）；

将显示结果的代码放在return语句当前所在的位置…谢谢。这就是我的想法。有没有避免回调的方法？因为对我来说，这感觉像是过于复杂的代码。@L105谈论的是

。when（）

，这听起来很有趣其他建议（由L105和Tomas Santos提出）两者都意味着在响应到达时传递一个要调用的函数，因此它们只是回调的不同语法（依赖于承诺，这确实非常有趣）。这并不太复杂，这是处理异步操作的标准方法。避免这种情况的唯一方法是使用同步请求，正如我提到的，这并不好……是的，我已经与这场斗争斗争了很长时间，使用了

async:false

，最后接受了这只是自找麻烦。我不建议使用synchronous AJAX，又名

SJAX

谢谢。这就是我的想法。有没有办法避免回调？因为对我来说，这感觉像是过于复杂的代码。@L105谈论的是

。when（）

，这听起来很吸引其他建议（作者：L105和Tomas Santos）两者都意味着在响应到达时传递一个要调用的函数，因此它们只是回调的不同语法（依赖于承诺，这确实非常有趣）。这并不太复杂，这是处理异步操作的标准方法。避免这种情况的唯一方法是使用同步请求，正如我所提到的，这并不好……是的，我已经与这场斗争斗争了很长时间，使用了

async:false

，最后接受了这一点