jQuery-對一個AJAX調用的多功能調用

Question

我有一個頁面，該頁面應在初始頁面加載一些通過AJAX的數據之后加載，然后將其用於一些功能。

到目前為止，我只能使它與單獨加載AJAX請求一起工作（這意味着同一請求被調用了30次）

我需要的是可能具有可以多次調用的功能，但是只能激活一次AJAX調用，而其他時候卻可以返回數據，而不必再次執行已經使數據重新運行的同一AJAX調用（這是多余的）並且不需要，數據不會更改）。

現在，我可以通過簡單地進行調用並將其存儲在全局變量中，然后僅檢查此變量中是否有內容來做到這一點...

但！ 問題是，但是，大約20個需要AJAX傳遞信息的調用在加載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

您必須保留所有“回調”，然后在數據准備就緒時，調用剛剛保存的回調，例如：

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秒才能完成的功能。 我兩次調用了該函數。 但是“ setTimeout”僅運行一次。 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;  
    }
}

第一次調用“ getData”函數時如何保存。 當它已經被調用時，您可以返回自己的“ deferred”對象，並在您的第一個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請求。