Javascript: Comment mettre un simple retard dans l'entre-exécution de code javascript?

J'ai une boucle for qui parcourt plus de 10 000 fois en un code javascript. Pour la boucle crée et ajoute < div > balises dans une zone de la page en cours DOM.

for(i = 0; i < data.length; i++)
{
    tmpContainer += '<div> '+data[i]+' </div>';
    if(i % 50 == 0) { /* some delay function */ }
}
containerObj.innerHTML = tmpContainer;

je veux mettre un délai après chaque 50 < div > balises quel sera donc le code à la place de

/* some delay function */

car sa prend trop de temps pour charger tous les 10000 < div > balises. je veux mettre à jour la boîte en morceaux de 50 < div > balises.

merci d'avance.

OriginalL'auteur Vin | 2011-02-06

  1. 15

    Il y a un truc utile dans les situations suivantes: utilisation d'un setTimeout avec 0 millisecondes. Ce sera la cause de votre JavaScript de rendement pour le navigateur (donc il peut effectuer son rendu, de répondre à la saisie de l'utilisateur et ainsi de suite), mais sans forcer il attendre un certain laps de temps:

    for (i=0;i<data.length;i++) {
    tmpContainer += '<div> '+data[i]+' </div>';
    if (i % 50 == 0 || i == data.length - 1) {
        (function (html) { //Create closure to preserve value of tmpContainer
            setTimeout(function () {
                //Add to document using html, rather than tmpContainer

            }, 0); //0 milliseconds
        })(tmpContainer);

        tmpContainer = ""; //"flush" the buffer
    }
}

    Note: T. J. Crowder correctement mentionne ci-dessous le code ci-dessus va créer des fonctions inutiles à chaque itération de la boucle (à mettre en place la fermeture, et l'autre comme un argument pour setTimeout). Cela est peu être un problème, mais si vous le souhaitez, vous pouvez vérifier son alternative qui crée uniquement la fonction de clôture une fois.

    Un mot d'avertissement: même si le code ci-dessus sera plus agréable de rendu d'expérience, avoir 10000 étiquettes sur une page n'est pas conseillé. Tous les autres DOM, la manipulation sera plus lent après cela, car il y a beaucoup plus d'éléments à traverser, et beaucoup plus cher de redistribution de calcul pour toutes les modifications de mise en page.

    Que ça va marcher, mais deux remarques: 1. Il inutilement crée un nouveau fonction chaque fois que vous atteignez 50 divs. C'est 199 fonctions inutiles. Probablement d'accord, mais encore, évitables. 2. Il est plus efficace de construire HTML dans un tableau de chaînes de caractères, et ensuite utiliser a.join("") pour créer une grande chaîne lorsque vous avez terminé, que l'usage de la concaténation de chaîne à construire le code HTML.
    vous avez raison sur ces deux points, mais je n'ai pas pris la peine pour l'amour de la simplicité: 1. La fonction de création est rarement un problème de performances, en particulier lorsque le goulot d'étranglement est le DOM, 2. la concaténation de chaîne est seulement un problème sur IE, et souvent plus rapide dans d'autres navigateurs, mais même pour IE, depuis que je suis réinitialisation tmpContainer à une chaîne vide, les cordes ne jamais devenir grand 😉
    vraiment sympa solution.
    travail parfait
    Viens de voir ça: document.write?!?! Que platement ne fonctionnera pas. appendChild, etc., est fine.

    OriginalL'auteur David Tang

  2. 2

    Vous pouvez utiliser le de la fenêtre.setTimeout fonction de retarder l'exécution de code:

    if(i % 50 == 0) {
    window.setTimeout(function() {
        //this will execute 1 second later
    }, 1000);
}

    Mais votre javascript continuera à exécuter. Il ne s'arrêtera pas.

    OriginalL'auteur Darin Dimitrov

  3. 1

    J'avais casser le code de la création de la divs dans une fonction, et ensuite planifier l'exécution de cette fonction périodiquement via setTimeout, 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
    }
}

    Il utilise un seul système de fermeture, doAChunk pour faire le travail. Cette fermeture est admissible pour la collecte des ordures une fois son travail terminé. (Plus: Fermetures ne sont pas compliqué)

    Live exemple

    pas de résoudre votre problème
    problème? Hein?
    Oh, je vois, vous signifie son problème. J'ai été confronté à la question de ne pas faire les mises à jour intermédiaires; redistribution est tout autre chose.

    OriginalL'auteur T.J. Crowder

  4. 1

    il prend beaucoup de temps parce que les retours. vous devez créer un fragment de document, et en ajoutant les marmots.

    Quand redistribution se produire dans un DOM l'environnement?

    Performances Javascript - Dom Refusion Google De L'Article

    de couchage ne résoudra pas votre problème

    sur l'autre main, vous la création d'une chaîne de caractères contenant le innerhtml et l'ajouter à la innerhtml. la chaîne des trucs pas vraiment besoin d'une grande performance, mais lorsque vous exécutez la .innerhtml de commande, il commence un processus qui analyse votre chaîne et de créer des éléments et en les ajoutant. vous ne pouvez pas interrompre ou d'ajouter un délai.

    la innerhtml processus ne peut pas être dormi ou interrompu.

    vous avez besoin de générer les éléments un par un, et après 50 elemnts ajoutée, créer un settimeout retard.

    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);

}

    OriginalL'auteur Gergely Fehérvári

  5. -1

    Ici est le vrai truc pour mettre un retard en javascript sans accrocher le navigateur.
    Vous avez besoin d'utiliser une fonction ajax avec la méthode synchrone qui va appeler une page php et que la page php, vous pouvez utiliser la fonction sleep() de php de la fonction !
    http://www.hklabs.org/articles/put-delay-in-javascript

    Notez que lien-seules réponses sont découragés, de SORTE que les réponses devraient être le point final d'une recherche d'une solution (contre encore une autre escale de références, qui a tendance à devenir obsolètes au fil du temps). Veuillez considérer l'ajout d'un stand-alone synopsis ici, en gardant le lien comme référence.

    OriginalL'auteur Kaushik