如何正确使用 setInterval()？

Question

我对 javascript 相当陌生，当我单击“setInterval”按钮时，我试图让框#aDiv 每秒移动一些像素，并在我按下“setTimeout”按钮时让它停止。 我不知道在名为“move”的 function 中写什么而不会出现任何错误。 如果有人可以指导我或帮助我，我将不胜感激。

这是我的代码

<html lang="en">
<head>
   <style>
   #aDiv{
       background-color: yellow;
       width: 150px;
       height: 150px;
       position: absolute;
       left: 10px;
       top: 200px;
       border-radius: 20px;
       box-shadow: 2.5px 2.5px 5px 2.5px black;
   }
   </style>
</head>
<body>
    <button type="button" onclick="setInterval()">Set interval</button><br>
    <button type="button" onclick="">Set timeout</button><br>
    <button type="button" onclick="myTimeoutFunction"> Clear timeout</button><br>
    <button type="button" onclick=myStopFunction""> Clear interval</button><br>

    <div id="aDiv"></div>
    <script>
var event = document.getElementById("aDiv");
var second = 1;
var myVar;

function setInterval(){
  myVar = setInterval(move,1000);
}

function move(){
    var eLeftPos = event.offsetLeft;
    event.style.left = (eLeftPos + second) + 'px';
}


function moveX(){
    document.getElementsByClassName("box").left = 100;
}
function myTimeoutFunction() {
  clearTimeout(myVar);
}

function myStopFunction() {
  clearInterval(myVar);
}

    </script>
</body>
</html> ```

Answer 1

正如已经说过的，你不应该命名你的 function setInterval 。 您正在覆盖浏览器的setInterval function 并且它无限期地调用自己。 此外，您的event变量包含一个没有意义的 DOM 元素。 为什么不将其命名为elem ？

一个好习惯也是不要直接在 HTML ( onclick="..." ) 中添加事件侦听器。

我不完全确定我理解你的问题，这是你想要做的吗？ （点击代码下方蓝色按钮试一试）

 var startBtn = document.getElementById("start-btn"), pauseBtn = document.getElementById("pause-btn"), resetBtn = document.getElementById("reset-btn"), elem = document.getElementById("aDiv"), second = 1, myInterval; startBtn.addEventListener('click', startAnimation); pauseBtn.addEventListener('click', pauseAnimation); resetBtn.addEventListener('click', resetAnimation); function startAnimation(){ // We don't want it to run multiples times in parallel pauseAnimation(); myInterval = setInterval(move, 50); } function pauseAnimation(){ clearInterval(myInterval); } function resetAnimation(){ pauseAnimation(); elem.style.left = '10px'; } function move(){ var eLeftPos = elem.offsetLeft; elem.style.left = (eLeftPos + second ) + 'px'; }

 #aDiv{ background-color: yellow; width: 50px; height: 50px; position: absolute; left: 10px; top: 50px; border-radius: 20px; box-shadow: 2.5px 2.5px 5px 2.5px black; }

 <button type="button" id="start-btn">Start</button> <button type="button" id="pause-btn">Pause</button> <button type="button" id="reset-btn">Reset</button> <div id="aDiv"></div>

如何正确使用 setInterval()？

问题描述

1 个解决方案

解决方案1
0 2019-11-21 23:33:23

如何正确使用 setInterval()？

问题描述

1 个解决方案

解决方案1 0 2019-11-21 23:33:23

解决方案1
0 2019-11-21 23:33:23