JavaScript 中的循环计时器

IT技术 javascript jquery
2021-02-15 10:19:18

我需要执行一段 JavaScript 代码,比如每 2000 毫秒。

setTimeout('moveItem()',2000)

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

所以在我的 moveItem 函数中,我有:

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

这不起作用,因为我想以 2000 毫秒的间隔执行触发器单击 jQuery 代码段,但现在它一直被调用并且脚本需要中断。除此之外,我觉得这是非常糟糕的编码质量......你们会如何解决这个问题?

6个回答

请注意,setTimeoutsetInterval是非常不同的功能:

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

两者都是实现相同目标的非常常见的方法。

@a432511 他们似乎与我略有不同,但我不确定实施情况。在setInterval中,它是在开始还是结束时启动计时器?如果它在最后启动计时器,则真正的延迟是给定的延迟 + 执行代码的时间。我认为 setInterval 对您提供的延迟会更准确。
2021-04-19 10:19:18
你让我清楚地理解setTimeoutsetInterval ,谢谢@Miguel Ventura
2021-04-22 10:19:18
和第一个一起去。它更好。只需让超时函数为自己创建一个新的超时调用。
2021-05-01 10:19:18
setInterval(moveItem, 2000);

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

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

setInterval(moveItem, 2000);

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

我相信你正在寻找setInterval()

它应该是:

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

setInterval(f, t)ft毫秒调用一次参数函数

这里是带有 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>

小提琴:演示