Question

我有一个页面应该在初始页面通过AJAX加载一些数据后加载，然后在一些函数中使用它。

到目前为止，我只能单独加载AJAX请求（这意味着同样的请求被调用30次）

我需要的是有一个可以被多次调用的函数的可能性，但是只激活一次AJAX调用，而其他时间给出数据，而不再使用已经使数据重新运行的相同AJAX调用（因为这是多余的而且不需要，数据不会改变。）

现在，我可以通过简单地进行调用并将其存储在全局变量中来检查是否存在此变量...

BUT！ “但是”是问题所在，这些需要AJAX提供的信息的大约20个调用就在加载DOM之后发生，与AJAX调用一起发生。

所以我不能这样做，因为20个请求发生在第一个AJAX调用之前，甚至完成了显示所有数据。

我尝试用JQueries“延迟”做一些事情，但是只能用一次调用来完成它，而不是几乎同时进行多次调用，而不是每次触发AJAX调用。

但我相信一定有可能！很好，没有某种循环和超时。我非常喜欢部分加载页面和部分页面的想法。输入字段不是从一开始就加载，而是在它准备好后立即交付......

是吗？我真的无法绕过这一个......

$(function(){
    loadme1();
    loadme2(); /* loaded from complete different parts in the code, so not possible to start loadme2 only after loadme1 has everything finished */
});

function getData(){ 
    return $.get("/pathtogetthedata", {}, function(data){

    });
}

function loadme1(){
    getData().done(function(data){           
        var obj = $.parseJSON(data); 
        /* do something with obj */
    }
}
function loadme2(){
    getData().done(function(data){ //please just wait till the first call to the same method finished and give me that data or wait till it's in a global variable and I take it from there. Only make a call if there is no jquery "promise" waiting    
        var obj = $.parseJSON(data); 
        /* do something with obj */
    }
}

Answer 1

你必须保留所有＆＃34;回调＆＃34;然后当数据准备就绪时，调用刚刚保存的回调函数：

var funcs = []

function exampleOfAjaxGetData(callback) {
    funcs.push(callback)
    if (funcs.length == 1) {
        setTimeout(function() {
            alert('This is need to be called once1')
            while (funcs.length > 0)
                funcs.pop()('The data return from ajax')
        }, 2000)
    }
}


exampleOfAjaxGetData(function(x) {
    alert('I got the data:' + x)
})

exampleOfAjaxGetData(function(x) {
    alert('I got the data:' + x)
})

jsFiddle：http://jsfiddle.net/yn5ayw30/

在示例中，我向您展示了一个需要2秒钟才能完成的功能。我把这个函数叫了两次。但是＆＃34; setTimeout＆＃34;只运行一次。当setTimeout完成时，它将运行等待回答的所有函数。

Answer 2

我可以想到一个解决方案：

var adata = -1; // global variable data holder

function getdata()
{
    //if ajaxx call is already done and completed then return data
    if(adata != -1 && adata != -2)return adata;

    if(adata == -1) 
    {
        //function getting called first time

        adata = -2; // now we change value of adata to -2
        // we will use this -2 to check if ajaxx call is stil running
        //do ajaxx $.get call
        $.get( "url_goes_here", function( data ) {
            adata = data;// assingh received data to adata, so -2 is changed now
        });
        //now code will move to while loop part even after first call as while loop part doesn't have condition
        //thus waiting for ajaxx call to be completed even if its first call
    }
    while(adata == -2){ 
        //just a loop to delay output until call finishes
    }
    return adata;

}

现在您可以使用getdata（）函数来实现您想要的功能

Answer 3

var getDataCalled = false;
var deferred = $.Deferred();
function getData(){ 
    if(!getDataCalled) {
        getDataCalled = true;
        return $.get("/", {} , function(data) {
              deferred.resolve(data);
        });
    } else {
         console.log("returning deferred");
         return deferred;  
    }
}

当你第一次打电话给你的＆＃34; getData＆＃34;功能。当它已经被调用时，你将返回自己的＆＃34; deferred＆＃34;对象返回并在第一个ajax请求完成时解决它。我希望这段简短的代码片段能说明问题并且易于理解。

现在，调用getData（）将首先发出ajax请求，然后返回您自己创建的延迟对象。

getData().done(function(data) {
  console.log(data);
});
getData().done(function(data) {
  console.log(data);
});
getData().done(function(data) {
  console.log(data);
});

您将看到只有一个ajax请求。

Jquery - 多个函数调用一个AJAX调用

3 个答案: