Le moyen le plus efficace d'ajouter/supprimer dans jQuery

Question

L'idée est de créer une barre de progression mais avec des arrêts ".". Donc dans la div, un "." est ajouté toutes les 500ms, ce que je voulais faire est, si la longueur de la div (c'est-à-dire le nombre de ".") est plus grand que 3, commencer à supprimer un "." à un moment, puis quand à 0, recommencer le processus:

  setInterval(function() { 
        $("#load").append("."); 
        var length; 
        $('#load').each(function(){ 
        length = $("#load").val().length; 
        }); 
        if (length > 3){ 
        $("#load").remove("."); 
        } 
      }, 500); 

Answer 1

Je ne pense pas que l'efficacité soit un problème ici.

Il y a quelques petites choses à corriger: si

1. .val() ne fonctionne que pour les entrées de formulaire - pour divs que vous voulez .text(). Je suppose qu'il n'y a qu'une div avec l'ID 'load'. S'il y en a plus, une classe devrait être utilisée à la place d'un ID, et sinon, le .each() n'est pas nécessaire.

Enfin, voici comment je le ferais:

var count = 0, dots = '...'; 
setInterval(function() { 
    var len = Math.abs(count++ % 6 - 3); // Gives only 3, 2, 1, 0, 1, 2, 3, ... 
    $('#load').text(dots.substring(0, 3 - len)); 
}, 500); 

Voir une démo ici: http://jsfiddle.net/Xp77Q/3/

Answer 2

La façon dont vous faites cela est très inefficace, car elle touche plusieurs noeuds DOM-sur tous les changements. Il sera plus efficace de conserver la valeur de progression actuelle dans une variable et de la mettre à jour avec un appel $('#load').html(...) unique.