チェックボックスがたくさんある Web フォームがあります。特定のボックスをクリックすると、より多くのデータを含む特定の 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()
です。ユーザーエクスペリエンスを妨げないように、これを非同期にしたいと考えています。
これはある種のコールバックを介して実行できると思いますが、これは私の専門分野ではありません。非同期関数をセットアップして呼び出して、他の非同期関数が完了していることを確認し、いつ別の関数を呼び出して終了するかを確認するにはどうすればよいですか?
それが明確であることを願っています。