我怎样才能多次调用setInterval？

问题描述：

所以，我想用按钮多次调用setInterval，但是当我第二次按下按钮时没有任何反应。我搜索了其他类似的问题，但他们在jQuery中，并没有为我工作。我怎样才能多次调用setInterval？

编辑：我想要做的是通过点击按钮重复动画。

var element, add, intervalo; 
 
add = 0; 
 
function start(){ 
 
\t intervalo = setInterval(interval, 50); 
 
} 
 
function interval() { 
 
\t add = add + 25; 
 
\t element = document.getElementById('teste'); 
 
\t element.style.left = add; 
 
\t if (add > 300) { 
 
\t \t clearInterval(intervalo); 
 
\t \t intervalo = null; 
 
\t \t element.style.left = 0; 
 
\t \t } 
 
\t }

#teste { 
 
\t position: absolute; 
 
}

<html> 
 
\t <head> 
 
\t \t <script src="js/main.js"></script> 
 
\t \t <link rel="stylesheet" src="text/css" href="css/estilo.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <h1 id="teste">Ola</h1> 
 
\t \t <button onclick="start()">Start</button> 
 
\t </body> 
 
</html> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t

如果启动多个定时器，你就会有他们都共享该相同的变量的问题。 – Pointy

@Pointy我可以做些什么来解决这个问题，除了创建更多变量之外还有其他方法吗？ –

也许你的意思是在clearInterval块中设置'add = 0'。 – Malk

答

你是不是重置add变量，所以当时间间隔被触发第二次将向右走的clearInterval部分。

var element, add, intervalo, btn, element; 
 

 
add = 0; 
 
btn = document.getElementById('btn'); 
 
element = document.getElementById('teste'); 
 

 
function start() { 
 
    btn.disabled = true; 
 
    intervalo = setInterval(interval, 50); 
 
} 
 

 
function interval() { 
 
    add = add + 25; 
 
    element.style.left = add + 'px'; 
 
    if (add > 300) { 
 
    clearInterval(intervalo); 
 
    intervalo = null; 
 
    element.style.left = 0; 
 
    btn.disabled = false; 
 
    add = 0; 
 
    } 
 
}

#teste { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<html> 
 

 
<head> 
 
    <script src="js/main.js"></script> 
 
    <link rel="stylesheet" src="text/css" href="css/estilo.css"> 
 
</head> 
 

 
<body> 
 
    <h1 id="teste">Ola</h1> 
 
    <button id="btn" onclick="start()">Start</button> 
 
</body> 
 

 
</html>

感谢您的帮助，它现在可以工作：） –

我怎样才能多次调用setInterval？

相关推荐