javascript - template - github backbone

JavaScript Infinite Loop?

Question

¿Cómo hago un ciclo infinito en JavaScript? Estoy tratando de hacer una presentación de diapositivas, que he estado trabajando, pero no puedo hacer que se repita. Ni siquiera puedo hacer que se repita dos veces.

El código que estoy usando ahora mismo es

window.onload = function start() {
    slide();
}
function slide() {
    var num = 0;
    for (num=0;num<=10;num++) {
        setTimeout("document.getElementById(''container'').style.marginLeft=''-600px''",3000);
        setTimeout("document.getElementById(''container'').style.marginLeft=''-1200px''",6000);
        setTimeout("document.getElementById(''container'').style.marginLeft=''-1800px''",9000);
        setTimeout("document.getElementById(''container'').style.marginLeft=''0px''",12000);
    }
}

Sin lo de adentro, pasa una vez. Cuando lo puse, hace que Firefox se bloquee o simplemente se repite una vez. Estoy seguro de que esto es algo realmente simple de hacer, e incluso si tiene que ser un bucle de 1,000,000 de veces o algo en lugar de infinito, eso funcionaría bien para mí.

Además, no quiero usar jQuery o algo que alguien más haya creado. Estoy aprendiendo JavaScript, y esto es en parte para ayudarme a aprender, y en parte porque estoy tratando de hacer tantos sistemas basados ​​en HTML5 como pueda.

EDITAR: Creo que la razón por la que está congelado es porque ejecuta el código de una vez, y luego simplemente lo almacena en un caché o algo así. Lo que quiero que haga es pasar esto una vez, luego comenzar de nuevo en la parte superior, que es lo que siempre he pensado en los bucles. En scripts "por lotes" (símbolo del sistema), esto podría hacerse con un comando " GOTO ". No sé si hay un equivalente en JS o no, pero ese es realmente mi objetivo.

Answer 1

Aquí hay una solución agradable y ordenada para usted: ( también vea la demostración en vivo -> )

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

Como intentas aprender, permíteme explicarte cómo funciona esto.

Primero declaramos dos variables: currMarg y contStyle . currMarg es un número entero que usaremos para rastrear / actualizar qué margen izquierdo debe tener el contenedor. Lo declaramos fuera de la función de actualización real (en un closure ), de modo que se puede actualizar / acceder continuamente sin perder su valor. contStyle es simplemente una variable de conveniencia que nos da acceso a los estilos de contenedores sin tener que ubicar el elemento en cada intervalo.

A continuación, usaremos setInterval para establecer una función que debería llamarse cada 3 segundos, hasta que le digamos que se detenga (allí está su ciclo infinito, sin congelar el navegador). Funciona exactamente como setTimeout , excepto que ocurre infinitamente hasta que se cancela, en lugar de suceder una sola vez.

Pasamos una función anónima a setInterval , que hará nuestro trabajo por nosotros. La primera línea es:

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

Este es un operador ternario . Asigne a currMarg el valor de 0 si currMarg es igual a 1800 , de lo contrario aumentará currMarg en 600 .

Con la segunda línea, simplemente asignamos nuestro valor elegido al container leftLeft, ¡y terminamos!

Nota: Para la demostración, cambié los valores negativos a positivo, por lo que el efecto sería visible.

Answer 2

El enfoque correcto es usar un solo temporizador. Usando setInterval , puedes lograr lo que quieras de la siguiente manera:

window.onload = function start() {
    slide();
}
function slide() {
    var num = 0, style = document.getElementById(''container'').style;
    window.setInterval(function () {
        // increase by num 1, reset to 0 at 4
        num = (num + 1) % 4;

        // -600 * 1 = -600, -600 * 2 = -1200, etc 
        style.marginLeft = (-600 * num) + "px"; 
    }, 3000); // repeat forever, polling every 3 seconds
}

Answer 3

Está llamando a setTimeout() diez veces seguidas, por lo que todas caducan casi al mismo tiempo. Lo que realmente quieres es esto:

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

Esto llamará a la diapositiva (10), que luego configurará el tiempo de espera de 3 segundos para llamar a la diapositiva (9), que establecerá el tiempo de espera para llamar a la diapositiva (8), etc. Cuando se invoca la diapositiva (0), no habrá más tiempos de espera preparar.

Answer 4

La clave no es programar todas las fotografías a la vez, sino programar una próxima foto cada vez que se muestre una imagen.

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

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

La alternativa es usar setInterval , que establece la función para que se repita con regularidad (a diferencia de setTimeout , que programa la próxima aparición solamente.

Answer 5

No quiere while(true) , que bloqueará su sistema.

Lo que quiere en su lugar es un tiempo de espera que establece un tiempo de espera en sí mismo, algo como esto:

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

// boot up the first call
start();

Answer 6

Perhps esto es lo que estás buscando.

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

Answer 7

Puede hacer bucles infinitos fácilmente a través de la recursión.

function it_keeps_going_and_going_and_going() {
  it_keeps_going_and_going_and_going();
}

it_keeps_going_and_going_and_going()

Answer 8

prueba esto:

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 es básicamente un ''bucle infinito'' y no ennegrecerá el navegador. espera el tiempo requerido, luego va de nuevo