Jquery - empêche les requêtes ajax de "s'empiler"

D'accord, cela peut se faire de deux façons. L'un est du côté de la présentation, et l'autre vient du côté "traitement".Jquery - empêche les requêtes ajax de "s'empiler"

J'ai maintenant un tableau de configuration de données. Certaines actions (en tapant une requête de recherche, cliquez sur un numéro de page différent, etc ...) déclenche une fonction appelée refreshData()

refreshData() premiers appels showOverlay() qui se fane dans une superposition avec une image loading.gif. Ensuite, il fait une demande $.post() pour obtenir des données json. Puis, avec succès, il appelle hideOverlay() ce qui fait disparaître la superposition.

function refreshData() 
    { 
     showOverlay(); 
     var parameters = {'page' : '1', 'per-page' : '5'}; 
     $.post(updateUrl, parameters, 
      function(data){ 
       $('#data-container table tbody').empty(); 
       $.each(data.users, function(i, user){ 
        $('#data-container table tbody').append('<tr>'+ 
        '<td>'+ user.name +'</td>'+ 
        '<td>'+ user.registered +'</td>'+ 
        '<td>'+ user.id +'</td>'+ 
        '<td><a href="https://stackoverflow.com/users/edit/' + user.id + '">edit</a></td>'+ 
        '</tr>' 
        ); 
       }); 
       alternateRows(); 
       hideOverlay(); 
     }, "json"); 
    }

Ma première question (présentation) est que si refreshData() est appelée à plusieurs reprises, la superposition se fane et au-dessus et plus. Il est empilé de telle sorte que même si l'utilisateur ne fait rien, il va disparaître et s'éteindre jusqu'à ce qu'il ait fait autant de fois que les actions se sont produites. J'aimerais que cela disparaisse seulement si la «demande» la plus récente est terminée.

Mon deuxième problème (traitement) peut même pas importer. Je me demande si avant d'ajouter de nouveaux éléments au DOM, je devrais vérifier s'il y a une nouvelle demande pour le moment. S'il n'y a pas de raison d'ajouter des choses simplement pour les supprimer. Est-ce assez important? Et si c'est comme ça que je devrais faire ça?

Source

2010-10-09 Matthew

Je ne sais pas ce que votre fonction showOverlay() ressemble, mais vous pouvez faire quelque chose comme ceci:

function showOverlay() 
{ 
    if($('#overlay :animated').length > 0 || $('#overlay').hasClass('visible')) 
    { 
     return; 
    } 
    //Show overlay 
}

:animated

Source

2010-10-09 02:44:31 UnkwnTech

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script> 
$(document).ready(function() { 
    var timer = 1000; // milliseconds 

    var running = false; 
    $("#myTextField").keypress(function() { 
     if (!running) { 
      running = true; 

      $.getJSON('object.json', function(data) { 
       setTimeout(function() { 
        alert($("#myTextField").val()); 
        running = false; 
       }, timer); 
      }); 
     } 
    }); 
}); 
</script> 
</head> 

<body> 

<input id="myTextField" type="text" size="100%" /> 
</body> 

</html>

Source

2010-10-09 02:45:29 Corey

Dans cet exemple, le JSON sera appelé au maximum une fois par seconde, car "running" ne sera pas mis à false tant que la fonction inside ne sera pas terminée. – Corey

Jquery - empêche les requêtes ajax de "s'empiler"

Répondre

Questions connexes