jQuery:如何检查以确保所有异步操作都已完成

时间:2012-06-29 19:24:54

标签: javascript jquery callback

我有一个带有一堆复选框的网络表单;单击特定框时,它会显示/隐藏包含更多数据的特定div。当正确隐藏/显示div时,我运行格式化命令来正确组织和着色。

某些复选框依赖于其他复选框,并且会实施级联方案,因此有可能甚至可能一次性更改几个复选框。

我没有为每个复选框编写代码,而是决定采用快捷方式并以相同的方式处理所有复选框。我最终是这样的(使用2个复选框/ div来表明观点,还有更多):

jQuery(document).ready(function () {

    alternateDivs();

    jQuery('#AccessCAS, #CAS_LELOCSpecific').on('click', function () {
        showHide();
    });

});

function showHide() {

    var theChecks = [
        {
            checkId: 'AccessCAS',
            divId: 'divCAS'
        },
        {
            checkId: 'CAS_LELOCSpecific',
            divId: 'divLELOC'
        }
    ];

        var pendingChanges = 0;

    for (i = 0; i < theChecks.length; i++) {
        var checked = jQuery('#' + theChecks[i].checkId).is(':checked');
        var visible = jQuery('#' + theChecks[i].divId).is(':visible')
        if (checked && !visible) {
            pendingChanges++;
            jQuery('#' + theChecks[i].divId).fadeIn(400, function () {
                pendingChanges--;
            });
        } else if (!checked && visible) {
            pendingChanges++;
            jQuery('#' + theChecks[i].divId).fadeOut(400, function () {
                pendingChanges--;
            });
        }
    }
//check for pending changes

}

function alternateDivs() {
    jQuery('.formTable:visible:odd').css('background-color', '#eeb');
    jQuery('.formTable:visible:even').css('background-color', '#eef');
}

我必须确保所有应该显示的div都能正确显示,这意味着在调用alternateDivs()之前,它们必须完全转换为可见/不可见状态。您可以看到我设置了一个pendingChanges值,以便在div转换时递增和递减。

我想要做的是设置一个异步过程来检查pendingChanges何时等于零,以及何时调用alternateDivs()。我希望它是异步的,这样它就不会干扰用户体验。

我相信这可以通过某种回调来完成,但这远远超出了我的专业领域。我如何设置和调用异步函数来检查以确保我的其他异步函数是否已完成,以及何时调用另一个函数并退出?

我希望这很清楚。

2 个答案:

答案 0 :(得分:2)

如何在淡入淡出回调中添加if语句?

if(pendingChanges==0){ alternateDivs() }

答案 1 :(得分:1)

异步加载操作结束后,您需要进行轮询操作,检查已加载的每个div并确认它们都已完成。您将进行轮询,直到确认所有元素。

您还可以为每个加载操作设置“onSuccess”或“onComplete”事件,以发布标记并在轮询器中使用该标志。

这是您的投票方式:

load1();
load2();
loadn();

(function poll(){
   setTimeout(function(){

   if (!allAreLoaded()){
     poll();
   }

  }, 30000);
})();