J'ai une boucle pour la boucle qui itière plus de 10 000 fois dans un code JavaScript. La boucle pour crée et ajoute des balises
/* some delay function */
5 Réponses :
Vous pouvez utiliser Window.Settimeout fonction pour retarder l'exécution de certains Code:
if(i % 50 == 0) {
window.setTimeout(function() {
// this will execute 1 second later
}, 1000);
}
Il y a une truc pratique dans ces situations: utilisez un degré d'ouverture avec 0 millisecondes. Cela fera cédera votre JavaScript à céder au navigateur (il peut donc effectuer son rendu, réagir à l'entrée de l'utilisateur, etc.), mais sans le forcer à attendre une certaine quantité de temps: Un mot d'avertissement: même si le code ci-dessus constituera une expérience de rendu plus agréable, avoir 10000 balises sur une page n'est pas souhaitable. Toutes les autres manipulations DOM seront plus lentes après cela car il existe de nombreux autres éléments pour traverser, et un calcul beaucoup plus coûteux de refusion pour toute modification de la mise en page. Settimeout ). Il est peu probable que ce soit un problème, mais si vous le souhaitez, vous pouvez consulter son alternative qui crée uniquement la fonction de fermeture Une fois.
Cela fonctionnera, mais deux commentaires: 1. Il crée inutilement une fonction nouvelle chaque fois que vous atteignez 50 divs. C'est 199 fonctions inutiles. Probablement bien, mais toujours évitable. 2. Il est plus efficace de construire HTML dans un tableau de chaînes, puis d'utiliser a.join ("") pour créer une grande chaîne lorsque vous avez terminé, que d'utiliser la concaténation de chaîne pour construire up the html.
@ T.J. Vous avez raison à propos de ces points, mais je ne me suis pas préoccupé par la simplicité: 1. La création de fonctions est rarement une question de performance, en particulier lorsque votre goulot d'étranglement est le DOM, 2. La concaténation de la chaîne n'est qu'un problème sur IE, et souvent plus vite dans d'autres navigateurs, mais même pour IE, car je réinitialise TMPContainer à une chaîne vide, les chaînes ne deviennent jamais grandes;)
@ Box9: Il suffit de le voir: document.write ?!?! Cela ne fonctionnera pas. Appendicateur , etc., c'est bien.
@ T.J. Eh bien, ça va travailler , mais ça va simplement écraser la page que vous avez eue, donc cela ne fonctionnera probablement pas comme prévu ;) J'espère que c'était clair que cela indique que cela indique simplement L'utilisation de la variable html plutôt que tmpcontainer .
@ Box9: interprétation intéressante du "travail". ;-) Je l'enlèverais comme complètement trompeur et juste aller avec un commentaire "Utiliser html ici pour créer des éléments". Au fait, je me suis trompé auparavant, c'est environ 398 fonctions totalement inutiles (vous recréez la chose que crée les fermetures, ce qui a encore moins besoin que l'autre). De plus, à moins que cela ne se produise que data.length% 50 == 0 , cela ne parviendra pas à émettre le dernier 1-49 ou au moins nécessiter du code dupliqué de le faire. Au lieu de: Pastie.org/1533736 Ceci est Tout à propos de donner une bonne réponse , ne pas vous donner du mal.
@ T.J. J'ai ajouté vos suggestions à ma réponse. Je suis toujours en désaccord sur la manière dont les fonctions supplémentaires sont significatives, mais je suis de toute façon liée à votre code. Aucun moment difficile donné, merci pour l'entrée.
@ Box9: agréable d'interagir avec quelqu'un qui n'est pas incroyablement délicieux. :-) Meilleur,
La sortie compte les gens, donc le problème est résolu de toutes vos points de vue. Merci pour ça...
Hey j'en ai une autre aussi ... Pouvez-vous s'il vous plaît aider avec ça aussi? Stackoverflow.com/Questtions/4917790/...
Je briserais le code créant le div code> s dans une fonction, puis planifiez l'exécution de cette fonction périodiquement via Settimeout code>, comme ceci: function createThousands(data) {
var index;
index = 0;
doAChunk();
function doAChunk() {
var counter;
for (counter = 50; counter > 0; --counter) {
// Are we done?
if (index >= data.length) {
// Yup
return;
}
// ...create a div...
// Move to the next
++index;
}
// Schedule the next pass
setTimeout(doAChunk, 0); // 0 = defer to the browser but come back ASAP
}
}
@fehergeri: mon problème ? Hein?
@fehergeri: Oh, je vois, tu veux dire son problème . Je traitais la question de ne pas faire des mises à jour intermédiaires; refusion est autre chose entièrement.
Il faut beaucoup de temps parce que les metains. Vous devez créer un fragment de document puis ajouter les broyes.
quand Est-ce que refus dans un environnement DOM? P>
JavaScript Performance - Dom Refefow - Article Google P>
Dormir ne résoudra pas votre problème fort> p> d'autre part, vous créez une chaîne contenant le fichier innerhtml et l'ajout à innerhtml. La chaîne de choses ne nécessite vraiment pas de grandes performances, mais lorsque vous exécutez la commande Le processus innerhtml ne peut pas être endormi ou interrompu. strong> p> Vous devez générer les éléments un par un, et après 50 éliminations ajoutées, créez un délai de sécurité. P> .innerhtml code>, elle démarre un processus, qui analyse votre chaîne et crée des éléments et les ajoute. Vous ne pouvez pas interrompre ou ajouter un délai. p> var frag = document.createDocumentFragment();
function addelements() {
var e;
for(i=0;i<50;++i) {
e = document.createElement('div');
frag.appendChild(e);
}
dest.appendChild(frag);
window.setTimeout(addelements,1000);
}
Voici le vrai truc pour mettre un retard dans JavaScript sans suspendre le navigateur. Vous devez utiliser une fonction Ajax avec une méthode synchrone qui appellera une page PHP et dans cette page PHP, vous pouvez utiliser la fonction PHP SLEEP ()! http://www.hklabs.org/articles/put-delay-in-javaScript
Notez que Les réponses de liaison uniquement sont découragées, les réponses doivent donc être le point final d'une recherche pour une solution (contre une autre halte de références, qui tendent à devenir obsolète au fil du temps). Veuillez envisager d'ajouter un synopsis autonome ici, en gardant le lien comme référence.