Comment faire pour afficher l'arrière-plan opaque sur l'événement jQuery click

Question

Pour afficher un arrière-plan opaque ou un gif animé lors de l'exécution d'une méthode après un clic sur un bouton, cela ne s'affiche pas. Il ne fonctionne qu'après que tout le code a été exécuté. Puis-je le faire dans jQuery, c'est-à-dire sur un rendu d'événement click, le html change avant et après le code principal.

La méthode de longue durée ajoute 100-500 divs à la page qui prend environ 10 secondes pour terminer.

 
$('#button).click(function() { 
    $('#curtain').css('visibility', 'visible'); 
    longRunningMethod();  
    $('#curtain').css('visibility', 'hidden'); 
});  

Le problème est que le #curtain div montre jamais, comme le javascript complet doit être exécuté avant de rendre tous les changements.

Style:

 

#curtain { 
    position: fixed; 
    _position: absolute; 
    z-index: 99; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    _height: expression(document.body.offsetHeight + "px"); 
    background-color: #CCCCCC; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    visibility: hidden; 
} 

Answer 1

Ce genre est un hack, mais si vous utilisez setTimeout cela pourrait fonctionner.

$('#button').click(function() { 
    $('#curtain').css('visibility', 'visible'); 
    setTimeout(doBigJob, 100); 
}); 

function doBigJob() 
{ 
    longRunningMethod();  
    $('#curtain').css('visibility', 'hidden'); 
} 

Answer 2

Vous ne devriez jamais avoir de longues méthodes de fonctionnement dans le thread d'interface utilisateur d'une page Web. Cela rendra la page bloquée et très ennuyante pour l'utilisateur. Au lieu de cela, vous devez utiliser le rappel asynchrone. A la place, vous devez utiliser le rappel asynchrone. La méthode de longue durée que je suppose fait quelques appels AJAX. Dans ce cas, il devrait accepter une fonction comme un argument (comme le "clic" jquery, "ajax", etc.). Passez ensuite cette fonction à la méthode ajax en tant que rappel d'achèvement ou de succès.

Ensuite, vous pouvez faire:

$('#button).click(function() { 
    $('#curtain').css('visibility', 'visible'); 
    longRunningMethod(function() {$('#curtain').css('visibility', 'hidden');}); 
});