Question

我有以下代码：

var table = new Array();
function getTableData(year) {
    if (!table.hasOwnProperty(year)) {
        $.ajax({
            ...
            success: function(data) {
                table[year] = data;
            }
        });
    }
}

所以，我希望该函数做的基本上是检查，如果我之前调用过Ajax请求，如果我有，请不要再调用它，但返回先前加载的数据。

这就像一个魅力。什么不起作用是这样的：

function showTable(year) {
    $('#loadingAnimation').show();
    $('#tableDiv').ajaxComplete(function() {
        // insert data into table
    }
    $('#loadingAnimation').hide();
}

只要之前没有加载数据（即表[year]尚不存在），就会执行ajax-request，当它完成时，数据被插入到表中，一切都很好。但是当table [year]确实存在时，我的函数没有什么可以等待的，我得到一个空白表加上加载动画。

我之前尝试过的是将ajax-request设置为同步并且不让我的函数调用“ajaxComplete”，然后每个都工作但我根本没有加载动画，屏幕在等待期间被冻结。

任何想法如何让我的脚本工作？在此先感谢：）

Answer 1

showTable()是否具有单独的功能？如在，初始加载后刷新表数据的单独按钮？

否则，您最好将加载动画直接添加到您的工作代码中，如下所示：

if (!table.hasOwnProperty(year)) {
    $('#loadingAnimation').show(); //start querying for data, display the icon
    $.ajax({
        ...
        success: function(data) {
            $('#loadingAnimation').hide(); //data found, hide icon
            table[year] = data;
        }
    });
}

Answer 2

您可以尝试再设置一个变量来存储上一个表[year]。因此，在所有后续调用中，您应该在执行任何其他操作之前进行检查。例如。就像是 -

// An example from a dynamic AJAX gallery I had built        
var 
// ...,
prepareMarkup,
loadResults,
resultsCache = {},
// ...
;

loadResults = function(req, category, tracker) {
// I am calling loadResults on every click (navigation in ur case)
// to load galleries
// thus, tracker is different for each link

if (req && req !== "") {
    // I am using a tracker by setting to a link, 
    // which keeps track of those that users have already clicked 
    // at least once
    if (typeof resultsCache[tracker] === "object" 
        && resultsCache[tracker].lookbookResults.length > 0) {
        // Load from cache instead
        buildLookbook(resultsCache[tracker], category);
        return;
    }


    $.ajax({
        type: "GET",
        url: "/bin/content/lookbook",
        data: "lookbook-feed=" + req + "&siteName=" + APP.Site.siteRoot,
        dataType: "json",
        success: function(response) {
            // Set cache
            resultsCache[tracker] = response;

            // Go ahead to build UI
            buildLookbook(response, category);
        },

//...

希望这就是你要找的东西

如果调用jQuery等待Ajax

2 个答案: