我有一个带有一堆复选框的网络表单;单击特定框时,它会显示/隐藏其中包含更多数据的特定 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()
. 我希望这是异步的,这样它就不会干扰用户体验。
我相信这可以通过某种回调来完成,但这远远超出了我的专业领域。我将如何设置和调用异步函数来检查以确保我的其他异步函数已完成,以及它们何时调用另一个函数并退出?
我希望这很清楚。