Boucle Infinie JavaScript?

vous ne voulez pas while(true) , qui va verrouiller votre système.

Ce que vous voulez, au contraire, est un délai que fixe un délai d'expiration sur lui-même, quelque chose comme:

function start() {
  // your code here
  setTimeout(start, 3000);
}

// boot up the first call
start();

Voici une bonne solution pour vous: ( voir aussi la démo en direct - > )

window.onload = function start() {
    slide();
}

function slide() {
    var currMarg = 0,
        contStyle = document.getElementById('container').style;
    setInterval(function() {
        currMarg = currMarg == 1800 ? 0 : currMarg + 600;
        contStyle.marginLeft = '-' + currMarg + 'px';
    }, 3000);
}

puisque vous essayez d'apprendre, permettez-moi d'expliquer comment cela fonctionne.

nous déclarons D'abord deux variables: currMarg et contStyle . currMarg est un entier que nous utiliserons pour suivre/mettre à jour la marge de gauche que le conteneur devrait avoir. Nous le déclarons en dehors de la fonction de mise à jour (dans une fermeture ) ), de sorte qu'il puisse être continuellement mis à jour/accéder sans perdre sa valeur. contStyle est simplement une variable de commodité qui nous donne accès aux styles de conteneurs sans avoir à localiser l'élément sur chaque intervalle.

ensuite, nous allons utiliser setInterval pour établir une fonction qui devrait être appelée Toutes les 3 secondes, jusqu'à ce que nous lui disions d'arrêter (il y a votre boucle infinie, sans geler le navigateur). Il fonctionne exactement comme setTimeout , sauf qu'il ça arrive indéfiniment jusqu'à l'annulation, au lieu d'arriver une seule fois.

nous passons une fonction anonyme à setInterval , qui fera notre travail pour nous. La première ligne est:

currMarg = currMarg == 1800 ? 0 : currMarg + 600;

C'est un opérateur ternaire . Il assignera currMarg à la valeur de 0 si currMarg est égal à 1800 , sinon il augmentera currMarg par 600 .

avec la deuxième ligne, nous assignons simplement notre valeur choisie à container s marginLeft, et c'est terminé!

Note: pour la démo, j'ai changé les valeurs négatives en positives, donc l'effet serait visible.

peut-être que c'est ce que vous cherchez.

var pos = 0;
window.onload = function start() {
    setTimeout(slide, 3000);
}
function slide() {
   pos -= 600;
   if (pos === -2400)
     pos = 0;
   document.getElementById('container').style.marginLeft= pos + "px";
   setTimeout(slide, 3000);
}

vous appelez setTimeout() dix fois de suite, donc ils expirent presque tous en même temps. Ce que vous voulez vraiment, c'est:

window.onload = function start() {
    slide(10);
}
function slide(repeats) {
    if (repeats > 0) {
        document.getElementById('container').style.marginLeft='-600px';
        document.getElementById('container').style.marginLeft='-1200px';
        document.getElementById('container').style.marginLeft='-1800px';
        document.getElementById('container').style.marginLeft='0px';
        window.setTimeout(
          function(){
            slide(repeats - 1)
          },
          3000
        );
    }
}

cela appellera slide(10), qui définira alors le délai de 3 secondes pour appeler slide(9), qui définira le délai pour appeler slide(8), etc. Quand slide (0) est appelé, plus de timeouts ne sera mis en place.

vous pouvez boucler assez facilement par récursion.

function it_keeps_going_and_going_and_going() {
  it_keeps_going_and_going_and_going();
}

it_keeps_going_and_going_and_going()

la clé n'est pas de programmer toutes les photos en même temps, mais de programmer un prochain pic à chaque fois que vous avez un pic affiché.

var current = 0;
var num_slides = 10;
function slide() {
    // here display the current slide, then:

    current = (current + 1) % num_slides;
    setTimeout(slide, 3000);
}

l'alternative est d'utiliser setInterval , qui définit la fonction à répéter régulièrement (par opposition à setTimeout , qui prévoit l'apparition suivante seulement.

essayez ceci:

window.onload = function start() {
    slide();
}
function slide() {
     setInterval("document.getElementById('container').style.marginLeft='-600px'",3000);
     setInterval("document.getElementById('container').style.marginLeft='-1200px'",6000);
     setInterval("document.getElementById('container').style.marginLeft='-1800px'",9000);
     setInterval("document.getElementById('container').style.marginLeft='0px'",12000);
}

setInterval est fondamentalement une "boucle infinie" et il ne noircira pas le navigateur. il attend le temps nécessaire, puis va de nouveau