ASP.NET MVC - requête ajax time

Question

J'utilise une boîte de dialogue modale jQuery pour afficher un message de type 'Please Wait' à un utilisateur lorsqu'un appel ajax est renvoyé au serveur. Je le fais en rendant la boîte de dialogue visible en utilisant la méthode ajaxSend de jQuery. Et je ferme la boîte de dialogue en utilisant la méthode jQuery ajaxComplete.

Tout ce qui est assez courant, j'en suis sûr.

Cependant, si l'appel prend très peu de temps (disons 10 millisecondes), alors je veux attendre qu'une seconde se soit écoulée depuis que j'ai rendu la boîte de dialogue visible avant de fermer la boîte de dialogue. La raison en est de fournir un retour de l'utilisateur ... et d'arrêter l'horrible scintillement de la boîte de dialogue en ouvrant rapidement puis en fermant.

Comment puis-je y parvenir en utilisant jQuery et/ou ajax?

Un grand merci pour les pointeurs.

Answer 1

J'ai rassemblé moi-même une solution pour cela - basée sur la grande réponse de 'redsquare' et d'autres lectures.

J'ai utilisé le code de redsqure pour ouvrir la boîte de dialogue modale uniquement après une durée donnée - donc je n'ai pas du tout à ouvrir le modal.

Lorsque le modal est ouvert, j'ai ajouté du code pour m'assurer qu'il reste ouvert pendant au moins 800 millisecondes ... juste pour éviter la possibilité qu'il clignote rapidement sur l'écran. Pour ce faire, je lance un timer javascript dans la méthode 'ajaxSend' puis j'utilise la méthode 'ajaxComplete' pour déterminer si le modal est ouvert. Si c'est le cas, j'utilise la minuterie pour calculer combien de temps il a été ouvert et compenser la différence à 800 millisecondes. J'ai adapté un script que j'ai trouvé en ligne pour mon compte à rebours. Script ci-dessous.

var timer_ms = 0; 
var timer_state = 0; 

/// <summary> 
/// Responsible for starting/stopping the timer. Also calculates time. 
/// </summary> 
function timerStartStop() { 
    if (timer_state == 0) { 
     timer_ms = 0; 
     timer_state = 1; 
     then = new Date(); 
     then.setTime(then.getTime() - timer_ms); 
    } 
    else { 
     timer_state = 0; 
     now = new Date(); 
     timer_ms = now.getTime() - then.getTime(); 
    } 
} 

/// <summary> 
/// Resets the timer. 
/// </summary> 
function timerReset() { 
    timer_state = 0; 
    timer_ms = 0; 
} 

Merci. Merci.

Answer 2

Un meilleur paradigme serait-il réellement d'attendre un certain temps avant d'afficher le dialogue? Si vous avez une application responsive, il serait logique de montrer seulement le modal si la réponse ne revient pas dans les 100 ms disons. Cela éviterait de retarder l'interface utilisateur juste pour éviter le scintillement, ce que vous proposez.

Remarque J'utilise beforeSend et le succès ici pour dummy le code

var timerid; 

    beforeSend: function(){ 

     //open the dialog in 100 milliseconds 
     timerid = window.setTimeout(function(){ 

      $('#dialog').dialog('close'); 

     }, 100) 

    }, 
    success: function(){ 

     //cancel the showing of the dialog if not already called 
     window.clearTimeout(timerid); 
     //close the dialog regardless 
     $('#dialog').dialog('close'); 
    } 

Si vous ne aimez pas cette idée SIMPLAY puis mettre la boîte de dialogue fonction de fermeture dans un setTimeout dans le rappel complet ajax par exemple

complete : function(){ 

    //close the dialog in 1 second 
    window.setTimeout(function(){ 

     $('#dialog').dialog('close'); 

    }, 1000) 

}