JavaScript无限循环?
这可能听起来像一个真正的小问题,但那是因为我对JS很新颖。 我在这个地方找不到任何信息,所以我想我会问社区。
如何在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,它或者使Firefoxlocking,或者只是循环一次。 我相信这是一件非常简单的事情,即使它需要循环100万次而不是无限循环,这对我来说也是很好的。
另外,我不想使用jQuery或其他人创build的东西。 我正在学习JavaScript,这部分是为了帮助我学习,部分是因为我试图尽可能多地制作基于HTML5的系统。
编辑:我认为它被冻结的原因是因为它一次执行的代码,然后只是将其存储在caching或其他东西。 我想要做的就是经过这一次,然后再从头开始,这是我一直认为循环的地方。 在“批处理”(命令提示符)脚本中,这可以通过“ GOTO
”命令来完成。 我不知道JS中是否有等价物,但这是我的目标。
正确的做法是使用一个计时器。 使用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 }
你不需要while(true)
,这将locking你的系统。
你想要的是一个超时设置超时本身,就像这样:
function start() { // your code here setTimeout(start, 3000); } // boot up the first call start();
这里有一个很好的,整洁的解决scheme:( 另请参阅现场演示 – > )
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); }
既然你正在努力学习,请允许我解释这是如何工作的。
首先我们声明两个variables: currMarg
和contStyle
。 currMarg
是一个整数,我们将使用它来跟踪/更新容器应该有的左边距。 我们在实际的更新函数之外(在一个闭包中 )声明它,这样它可以不断更新/访问而不会丢失它的值。 contStyle
只是一个便利的variables,它使我们能够访问容器的样式,而不必在每个区间定位元素。
接下来,我们将使用setInterval
build立一个每3秒应该调用一次的函数,直到我们告诉它停止(这是你的无限循环,不冻结浏览器)。 它的工作方式与setTimeout
相似,除非它直到取消才会发生,而不是只发生一次。
我们通过一个匿名函数 setInterval
,这将为我们做我们的工作。 第一行是:
currMarg = currMarg == 1800 ? 0 : currMarg + 600;
这是一个三元运算符 。 如果currMarg
等于1800
,它将分配currMarg
0
的值,否则将currMarg
增加600
。
通过第二行,我们只需将我们select的值分配给container
的marginLeft,我们就完成了!
注意:对于演示,我将负值更改为正值,所以效果可见。
Perhps这就是你正在寻找的。
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); }
你可以通过recursion非常容易地循环。
function it_keeps_going_and_going_and_going() { it_keeps_going_and_going_and_going(); } it_keeps_going_and_going_and_going()
您连续调用setTimeout()
十次,所以它们几乎同时过期。 你真正想要的是这样的:
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 ); } }
这将调用幻灯片(10),然后将设置3秒超时调用幻灯片(9),这将设置超时调用幻灯片(8)等滑动(0)被调用时,不会有更多的超时build立。
关键不是一次安排所有的照片,而是每次有图片显示时安排下一张照片。
var current = 0; var num_slides = 10; function slide() { // here display the current slide, then: current = (current + 1) % num_slides; setTimeout(slide, 3000); }
另一种方法是使用setInterval
,它将函数设置为定期重复(而不是setTimeout
,它只调度下一个外观。
尝试这个:
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
基本上是一个“无限循环”,它不会使浏览器黑屏。 它等待所需的时间,然后再去