Desejo fornecer funções auxiliares que permitam que vários componentes de uma UI complexa baseada em jQuery oculte ou mostre um carregamentodiv (usado quando uma chamada Ajax é iniciada a partir de várias partes da página).

Para esse fim, eu inicialmente escrevi código como este:

<script type="text/javascript">
$(function ()
{
    var loadingControl = $("#loading");

    function showLoading() {
        loadingControl.show();
    }
}
</script>

No entanto, percebi rapidamente queshowLoading está apenas no escopo dentro desse particulardocumento pronto.

Seguindo o conselho de

https://stackoverflow.com/a/1055799/141172

Eu declareishowLoading no escopo global como este:

<script type="text/javascript">
var showLoading;
$(function ()
{
    var loadingControl = $("#loading");

    function showLoading() {
        loadingControl.show();
    }
}
</script>

No entanto, ainda acho queshowLoading não está disponível emdocumento pronto blocos que são executados posteriormente. O erro é

O valor da propriedade 'showLoading' é nulo ou indefinido, não um objeto Function

Esse comportamento pode ser visto aqui:

http://jsfiddle.net/NfXFT/4/

O jsFiddle também prova que oshowLoading implementaçãodocumento pronto corre antes dodocumento pronto bloco que chama isso.

O que está errado e como posso disponibilizar esse método auxiliar?

Eu defino dentro de umdocumento pronto bloco porque depende de '#loading' estar disponível. Existe uma abordagem melhor para atingir o mesmo objetivo de fornecer uma função auxiliar para ocultar / mostrar a tela de carregamento? Eu quero manter isso em uma função auxiliar porque a implementação pode mudar mais tarde.