JavaScript 中的循环计时器

我需要执行一段 JavaScript 代码，每2000毫秒。

setTimeout('moveItem()',2000)

以上代码将在2000毫秒后执行一个函数，但不会再次执行。

在 moveItem 函数中，我有:

function moveItem() {
jQuery(".stripTransmitter ul li a").trigger('click');
setInterval('moverItem()',2000);
}

这不起作用，因为我希望每隔2000毫秒执行一次触发器 click jQuery 代码片段，但是现在它一直在被调用，脚本需要被中断。除此之外，我觉得这是非常糟糕的质量编码... 你们将如何解决这个问题？

210353 次浏览
小开 
setInterval(moveItem, 2000);

是每2秒执行函数 moveItem的 的方法。代码中的主要问题是您在回调内部而不是在回调外部调用 setInterval。如果我明白你想做什么，你可以用这个:

function moveItem() {
jQuery('.stripTransmitter ul li a').trigger('click');
}


setInterval(moveItem, 2000);

注意: 不要将字符串传递给 setTimeout或 setInterval——最佳实践是传递一个匿名函数或函数标识符(正如我上面所做的)。另外，注意不要混用单引号和双引号。选一个，坚持下去。

小开

我相信你正在寻找 SetInterval ()

小开

你应该试试这样的方法:

 function update(){
i++;
document.getElementById('tekst').innerHTML = i;
setInterval(update(),1000);
}

这意味着您必须创建一个函数，在该函数中您可以执行需要执行的操作，并确保它将使用您喜欢的间隔调用自己。在你的 body onload 中第一次像这样调用函数:

<body onload="update()">
小开

它应该是:

function moveItem() {
jQuery(".stripTransmitter ul li a").trigger('click');
}
setInterval(moveItem,2000);

setInterval(f, t)每隔 t毫秒调用一次参数函数 f。

小开
最佳答案

请注意，setTimeout和 setInterval是非常不同的函数:

  • 超时后，setTimeout将执行代码 一次。
  • setInterval将在提供的超时间隔内执行代码 永远。

这两个函数都返回一个 计时器 ID，您可以使用它来中止超时。您所需要做的就是将该值存储在一个变量中，并分别用它作为 clearTimeout(tid)或 clearInterval(tid)的参数。

因此，根据你想做的事情，你有两个有效的选择:

// set timeout
var tid = setTimeout(mycode, 2000);
function mycode() {
// do some stuff...
tid = setTimeout(mycode, 2000); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
clearTimeout(tid);
}

或者

// set interval
var tid = setInterval(mycode, 2000);
function mycode() {
// do some stuff...
// no need to recall the function (it's an interval, it'll loop forever)
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}

两者都是达到同样目的的非常常见的方法。

小开

这里的自动循环函数与 html 代码。我希望这可能是有用的人。

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div>
<script>


function test() {
$(".block").animate({left: "+=50", opacity: 1}, 500 );
setTimeout(mycode, 2000);
};
$( "#go" ).click(function(){
test();
});
</script>
</body>
</html>

小提琴: REL = “ nofollow”> DEMO < a href = “ http://jsfiddle.net/sBxWH/”rel = “ nofollow”> DEMO


提交答案