(jquery) : Après Ajax : succès, comment limiter le parsing en morceaux et insérer morceau par morceau dans le DOM (astuce pour accélérer)

Question

Supposons que la fonction : xmlParser(xml) soit appelée lors du succès de l'ajax et que la réponse XML contienne environ 1500 éléments xml (par exemple : ...).

L'intérieur ressemble à ça :

function xmlParser(xml){
    var xmlDOM = $(xml);  // dom object containing xml response

    xdom.find("book").each(function(){
        var $node = $(this);
        // parsing all the <book> nodes
    });
}

Comment pouvez-vous dire : analyser seulement les 20 premiers noeuds de la réponse xml, faire quelque chose avec eux. Et vous avez un bouton qui, lorsqu'il est cliqué, analyse les 20 noeuds suivants... et ainsi de suite.

En gros, existe-t-il quelque chose comme : children(20).... et une fonction qui analysera les 20 noeuds suivants lors du clic.

thx

Answer 1

Vous pouvez implémenter une pagination simple sur votre fonction xmlParser. Essayez quelque chose comme ceci :

function xmlParser(xml, page, perpage){
    // dom object containing xml response
    var xmlDOM = $(xml);

    // From what index to start showing
    var start = (page - 1) * perpage;

    // Find elements starting from start point using .gt() up to end point using .lt()
    xmlDOM.find("book").gt(start - 1).lt(perpage).each(function() {
        var $node = $(this);
        // Do your stuff
    });
}

// Usage
xmlParser(xml, 1, 20);

Cela ne permettrait de gérer que le nombre donné d'éléments sur une page donnée. Notez que cet exemple ne prend pas en compte le nombre minimal d'éléments.

Mais comme David V. l'a fait remarquer dans les commentaires, vous devriez simplement récupérer la quantité correcte de résultats du serveur en premier lieu plutôt que de les analyser en JS. Actuellement, vous téléchargez les 1500 enregistrements même si l'utilisateur ne veut que les 20 premiers.

Answer 2

Cela devrait faire le travail :

xdom.find("book:gt(lowerBound):lt(upperBound)").each(function(){
    var $node = $(this);
    // parsing all the <book> nodes
});

Où lowerBound et upperBound sont vos limites.

Answer 3

Je stockerai ces données de manière globale, soit dans une variable, soit dans un fichier jQuery, avec des données.

function xmlParser(xml){
    $.data(document.body, 'xmlDOM', $(xml));  // dom object containing xml response      
});}

et ensuite la deuxième fonction comme

function getBooks(start, end){
  return($.data(document.body, 'xmlDOM').slice(start, end));
});

l'usage :

var books = getBooks(0,20);
 $.each(books, function(i){
   // do anything with objects, $('#something').append($(this));
 });