indicateur d'action au cours de la fonction JQuery each()

Question

Comment faire indicateur d'action simple lors de l'exécution de JQuery each(), est-ce possible? J'ai quelques problèmes avec mon code JQuery, je ne comprends pas le comportement de celui-ci:/ Je suis nouveau à JQuery.

regard de code comme ceci:

$(function() { 
    $('#offer_discount').keyup(function() { 

      //here i try to show my hidden div with action indicator 
      $('#mask').show(); 

      $('#search-result').find('tr').each(function (index) { 
       // do some calc 
      }); 

      // here i try to hide my div with action indicator 
      $('#mask').hide(); 
    }); 
}); 

il ne fonctionnait pas correctement, div caché montre à la fin des calculs. Tout le monde peut aider?

Answer 1

Aucune mise à jour l'interface utilisateur sont visibles alors qu'un bloc de code Javascript est en cours d'exécution. Vous devez retourner le contrôle du navigateur avant que le changement est affiché. Vous pouvez le faire en utilisant un setTimeout appel avec un temps zéro, de sorte que le navigateur dessine la mise à jour, puis commence le reste du code:

$(function() { 
    $('#offer_discount').keyup(function() { 

    //here i try to show my hidden div with action indicator 
    $('#mask').show(); 

    window.setTimeout(function() { 

     $('#search-result').find('tr').each(function (index) { 
      // do some calc 
     }); 

     // here i try to hide my div with action indicator 
     $('#mask').hide(); 

    }, 0); 

    }); 
});