Essaie de retarder/pause/lent une boucle while en jQuery

J'ai regardé autour de beaucoup, et ne trouve pas encore de réponse. Peut-être que c'est simplement quelque chose qui ne peut pas être fait.

Je suis nouveau sur jQuery et JavaScript. Juste pour tester les limites, je suis en train de créer un script qui va continuellement ajouter un élément de liste à un non-ordonnée liste, tandis que d'une case à cocher n'est pas cochée. Je sais que je ne peut pas avoir mon tout énoncé correct dans la recherche si la case est cochée ou non, mais la principale question que je suis en ce moment est la boucle while se met à courir plus vite que le navigateur ne peut tenir en place, les écluses du haut de la page, et finalement je dois tuer le navigateur. J'ai lu de nombreux exemples sur setTimeout et setInterval, mais ce que j'ai en permanence voir, c'est ceux qui ne fonctionnent qu'avec un for/next style de boucle, où la boucle va pour un montant prédéterminé de cycles dépend d'une variable. Je ne veux pas de ça. Je veux la boucle de continuer jusqu'à ce que j'ai cocher la case et ensuite elle doit s'arrêter. Donc, je suis à la recherche d'un moyen pour mettre en pause la boucle ou le ralentir, donc 1) je peux voir chaque élément de la liste annexée à la page, et 2) le script va me donner une chance à la fin, il en cochant la case avant qu'il exécute le navigateur du gel et du suicide.

Merci à l'avance, le code est ci-dessous.

$(function(){
    $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);

        function loopLi() {
            while($('#Chckbox').not(":checked") ) {
                setInterval(function(){
                    i++;
                    $('<li>' + i + '</li>').appendTo('#jlist');
                }, 5000);
            }
        }
});

EDIT: Merci à tous. Ai eu de travail. N'a pas réalisé qu'une boucle while serait exécuter le code plusieurs fois en même temps. Cela est appris pour le travail, et le livre que nous avons actuellement n'est pas d'aller en profondeur avec des trucs. Actuellement à l'aide de jQuery: Novice à la Ninja. Autre chose que nous devrions regarder de répondre à ces types de questions, ou est-ce juste quelque chose qui vient avec le travail avec elle?

Seulement alors, vous comprenez pourquoi votre code a été le gel de votre navigateur: vous avez été l'exécution de la fonction setInterval dans la boucle while, des millions de fonction setInterval appels ont été faits, si vous avez ajouté des millions de minuteries pour votre page, qui paralysent votre navigateur. La morale de cette histoire est, de ne pas exécuter un appel asynchrone dans un (quasi -) boucle infinie.

OriginalL'auteur JHStarner | 2011-07-13

javascript jquery

12

Vous êtes en train de créer une quantité infinie d'intervalles, à condition que le while de la boucle est exécuté, il crée une nouvelle et le navigateur est donc toujours occupé et ne peut pas répondre à une case à cocher, cliquez. Juste un intervalle est assez.

Aussi, vous devez utiliser ! .is() parce que .not retourne un objet jQuery, qui est toujours truthy, c'est à dire en passant le if/while.

http://jsfiddle.net/rUAKx/
```
var i = 0;

function loopLi() {
    setInterval(function() { //this code is executed every 500 milliseconds:

        if(!$('#Chckbox').is(":checked")) {
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
        }

    }, 500);
}

$(loopLi);
```
Cela a fonctionné à merveille. Je suis maintenant inquiet de ce que quelqu'un dit ci-dessous. Quelque chose à propos de la compensation de l'intervalle. C'est quelque chose qui doit être fait, si je vais faire quelque chose d'autre, ou qu'est-ce que cela signifie?
Ce que je fais est de l'exécution de l'intervalle de toujours et en vérifiant à chaque fois si ou de ne pas ajouter un li. Vous pouvez également effacer l'intervalle lorsque la case n'est pas cochée. L'intervalle sera toujours ajouter un li mais l'intervalle ne sera pas exécutée si elle est désactivée.
très confus par ce que vous venez de dire...
Je vais essayer de m'expliquer à nouveau 🙂 Il y a deux possibilités: 1) Vérifier toutes les 5 secondes si la case est cochée et si oui, ajouter un li. 2) Lorsque vous cochez la case créer un intervalle qui ajoute une li toutes les 5 secondes. Lorsque vous décochez la case, arrêter cet intervalle.
Ok permettez-moi de m'assurer que je suis. Le code que vous avez donné, dit: "Nous avons une var de i est égal à 0. Maintenant, nous commençons cette fonction loopLi. Au cours de la prochaine demi-seconde d'exécuter ce (vérifiez si la case n'est pas cochée, si donc incrémenter i et append). Fini le code, tirez la fonction suivante loopLi." Cela signifie donc que le script est en cours d'exécution toutes les demi-secondes jusqu'à ce que la page est tué? Si donc, j'ai obtenu le résultat souhaité mais maintenant les choses ne fonctionnent pas efficacement. Si c'est pour tirer $(loopLi); aussi longtemps que la page est ouverte, même lorsque cette case est cochée, ne pas rendre ce quelque chose qui va manger lentement de la mémoire?

OriginalL'auteur pimvdb

Je devine que vous voulez faire quelque chose de similaire à ceci:

http://jsfiddle.net/PsXEa/5/

$(function(){
    i = $('#jlist li').size();
    console.log(i);

    function loopLi() {
        if ($('#Chckbox').not(":checked") ) {
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
            setTimeout(loopLi,1000);
        }
    }
    loopLi();
});

Note que vous avez beaucoup de solutions similaires ici. Vous devez en choisir un qui utilise soit un setTimeout appeler explicitement dans la boucle, ou qui nettoie leur setInterval minuterie avec clearInterval.

OriginalL'auteur ironchefpython

Vous pouvez utiliser la fonction clearInterval pour arrêter l'exécution de l'ajout de processus lorsque l'utilisateur coche la case.
Essayez ceci:

$(function(){
       var intObj = null;
  $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);
        function loopLi() {
            intObj = setInterval(function(){
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
          }, 5000);
        }
        $('#Chckbox').click(function(){
            if(this.checked){
             clearInterval(intObj );
            }
        });
});

comment loopLi connaît la valeur de i à l'intérieur?

OriginalL'auteur Chandu

0

Voici un travail de révision. Fondamentalement, loopLi va ajouter l'élément jusqu'à ce que la case est cochée. J'ai accéléré vers le haut de sorte que vous pouvez mieux voir.

http://jsfiddle.net/TrowthePlow/WkstU/

OriginalL'auteur josh.trow

Vous devez vous connecter pour publier un commentaire.