0

我的页面显示了不同类别的多个表格，每个表格都是通过 ajax 加载的。

类别的数量可能会有所不同，但我知道在进行 ajax 调用之前会存在多少。我像这样同时展示它们：

$(function(){
    var categories = 3; // this is calculated dynamically
    var categoriesLoaded = 0;

    $('#categoryA').load('/getCategoryA', function(){categoriesLoaded++;checkLoadProgress();});
    $('#categoryB').load('/getCategoryB', function(){categoriesLoaded++;checkLoadProgress();});
    $('#categoryC').load('/getCategoryC', function(){categoriesLoaded++;checkLoadProgress();});

    function checkLoadProgress(){
        if(categoriesLoaded == categories){
            $('.spinner').hide();
            $('.categories').show();
        }
    }
});

这行得通，但我想从你那里知道这是否是实现这一目标的一种体面的方式。

我的目标是有一个加载栏（也许我已经有足够的信息），但我真的不喜欢我检查状态的方式，重复的功能。欢迎任何提示

4

1 回答 1

0

我建议您进行一些更改（但通常我认为您的代码还不错）：

$(function(){
    var categories = 3; // this is calculated dynamically

    for(var categoriesLoaded = 0; categoriesLoaded < categories; categoriesLoaded++){
        var charCode = String.charCodeAt('A') + categoriesLoaded;
        var symbol= String.fromCharCode(charCode);
        $('#category'+ symbol).load('/getCategory' + symbol, function(){categoriesLoaded + 1;checkLoadProgress();});
    }

    function checkLoadProgress(){
        if(categoriesLoaded == categories){
            $('.spinner').hide();
            $('.categories').show();
        }
    }
});

但！checkLoadProgress() 只有在所有类别都加载并且它什么都不返回时才使用，这就是为什么看起来你可以写：

$(function(){
    var categories = 3; // this is calculated dynamically

    for(var categoriesLoaded = 0; categoriesLoaded < categories; categoriesLoaded++){
        var charCode = String.charCodeAt('A') + categoriesLoaded;
        var symbol = String.fromCharCode(charCode);
        $('#category'+ symbol).load('/getCategory' + symbol);
        //function() was deleted
    }

    $('.spinner').hide();
    $('.categories').show();
});
于 2012-12-14T08:24:26.773 回答