Document jQuery prêt et fonction Portée

Je souhaite fournir des fonctions d’assistance permettant à divers composants d’une interface utilisateur complexe basée sur jQuery de masquer ou d’afficher un div de chargement (utilisé lorsqu’un appel Ajax est lancé à partir de différentes parties de la page).

À cette fin, j’ai initialement écrit un code comme celui-ci:

 $(function () { var loadingControl = $("#loading"); function showLoading() { loadingControl.show(); } }

Cependant, j’ai vite compris que showLoading n’était disponible que dans le document .

Suite aux conseils de

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

J’ai déclaré showLoading dans la scope globale comme ceci:

  var showLoading; $(function () { var loadingControl = $("#loading"); function showLoading() { loadingControl.show(); } }

Cependant, je trouve toujours que showLoading n’est pas disponible dans les blocs de préparation de documents qui s’exécutent ultérieurement. L’erreur est

La valeur de la propriété ‘showLoading’ est null ou non définie, pas un object Function

Ce comportement peut être vu ici:

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

JsFiddle prouve également que le document ready de l’ implémentation de showLoading s’exécute avant le bloc de document ready qui l’appelle.

Qu’est-ce qui ne va pas et comment puis-je rendre cette méthode d’assistance disponible?

Je le définis dans un bloc de document ready car il repose sur la disponibilité de ‘#loading’. Existe-t-il une meilleure approche pour atteindre le même objective consistant à fournir une fonction d’aide permettant de masquer / afficher l’écran de chargement? Je veux garder cela dans une fonction d’assistance car l’implémentation peut changer plus tard.

Juste après avoir posté, j’ai réalisé ce que j’avais mal fait.

 function showLoading() { loadingControl.show(); }

devrait être

 showLoading = function() { loadingControl.show(); }