Question

所以，我想多次用一个按钮调用setInterval，但是当我第二次按下按钮时没有任何反应。我已经搜索了其他类似的问题，但它们都是jQuery，并没有为我工作。

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

＆＃13;

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

＆＃13;

#teste {
	position: absolute;
}

＆＃13;

<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>

＆＃13;

Answer 1

您没有重置add变量，因此当第二次触发间隔时，它会直接转到clearInterval部分。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我怎么能多次调用setInterval？

1 个答案: