JavaScript无限循环？

Question

如何在JavaScript中创建无限循环？我正在尝试制作幻灯片,我已经开始工作了,但我无法让它循环播放.我甚至无法让它循环两次.

我现在使用的代码是

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

没有那里的东西,它确实经历了一次.当我输入一个for时,它要么让Firefox锁定,要么只循环一次.我确信这是一件非常简单的事情,即使它必须循环1,000,000次而不是无限次,这对我来说还算合适.

另外,我不想使用jQuery或其他人创建的东西.我正在学习JavaScript,这部分是为了帮助我学习,部分是因为我正在努力制作尽可能多的基于HTML5的系统.

编辑:我认为它冻结的原因是因为它一次执行代码,然后只是将它存储在缓存或其他东西.我想要它做的就是经历一次,然后再次从顶部开始,这是我一直认为循环的地方.在"批处理"(命令提示符)脚本中,可以使用" GOTO"命令完成.我不知道JS中是否有相同的东西,但这确实是我的目标.

Answer 1

正确的方法是使用单个计时器.使用setInterval,你可以实现你想要的如下:

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 2

你不想要while(true),这会锁定你的系统.

你想要的是一个超时,它自己设置一个超时,如下所示:

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

// boot up the first call
start();

Answer 3

这是一个很好,整洁的解决方案:( 另见现场演示 - >)

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

既然你正在努力学习,请允许我解释一下它是如何工作的.

首先我们声明两个变量:currMarg和contStyle. currMarg是一个整数,我们将用它来跟踪/更新容器应该具有的左边距.我们将它声明在实际更新函数之外(在闭包中),以便它可以不断更新/访问而不会丢失其值. contStyle只是一个便利变量,它使我们可以访问容器样式,而无需在每个间隔上找到元素.

接下来,我们将使用setInterval建立一个应该每3秒调用一次的函数,直到我们告诉它停止(这是你的无限循环,没有冻结浏览器).它的工作原理完全如此setTimeout,除非它被取消,而不是只发生一次,它会无限发生.

我们通过一个匿名函数来setInterval,这将做好我们的工作为我们.第一行是:

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

这是一个三元运算符.它将分配currMarg的值0,如果currMarg等于1800,否则会增加currMarg的600.

在第二行,我们只需将我们选择的值分配给containers marginLeft,我们就完成了!

注意:对于演示,我将负值更改为正值,因此效果将是可见的.