複雑なjQueryベースのUIのさまざまなコンポーネントが読み込み中のdivを非表示または表示できるようにするヘルパー関数を提供したいと思います(ページのさまざまな部分からAjax呼び出しが開始されたときに使用されます)。
そのために、私は最初に次のようなコードを作成しました。
<script type="text/javascript">
$(function ()
{
var loadingControl = $("#loading");
function showLoading() {
loadingControl.show();
}
}
</script>
しかし、showLoadingは、その特定のドキュメントの準備ができている範囲内にあることにすぐに気付きました。
からのアドバイスに従う
https://stackoverflow.com/a/1055799/141172
次のようにグローバルスコープでshowLoadingを宣言しました。
<script type="text/javascript">
var showLoading;
$(function ()
{
var loadingControl = $("#loading");
function showLoading() {
loadingControl.show();
}
}
</script>
ただし、後で実行されるドキュメント対応ブロックではshowLoadingを使用できないことがわかりました。エラーは
プロパティ'showLoading'の値がnullまたは未定義であり、Functionオブジェクトではありません
この動作はここで見ることができます:
jsFiddleは、 showLoading実装のドキュメントレディが、それを呼び出すドキュメントレディブロックの前に実行されることも証明します。
何が問題になっていますか?このヘルパーメソッドを利用できるようにするにはどうすればよいですか?
'#loading'が使用可能であることに依存しているため、ドキュメントレディブロック内で定義します。ロード画面を表示/非表示にするヘルパー関数を提供するという同じ目標を達成するためのより良いアプローチはありますか?実装は後で変更される可能性があるため、これをヘルパー関数に保持したいと思います。