我如何调用setInterval不止一次

How can i call setInterval more than one time?

本文关键字：setInterval 不止一次 调用 何调用      更新时间：2023-09-26

所以，我想调用setInterval与一个按钮多次，但当我按下按钮第二次没有发生。我已经搜索了其他类似的问题，但他们是在jQuery和不为我工作。

编辑:我不想做的是通过点击按钮来重复动画。 

var element, add, intervalo;
add = 0;
function start(){
	intervalo = setInterval(interval, 50);
}
function interval() {
	add = add + 25;
	element = document.getElementById('teste');
	element.style.left = add;
	if (add > 300) {
		clearInterval(intervalo);
		intervalo = null;
		element.style.left = 0;
		}
	}
#teste {
	position: absolute;
}
<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 onclick="start()">Start</button>
	</body>
</html>

您没有重置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>

相关文章：