如何正确使用 setInterval()？

Question

I'm fairly new to javascript and I'm trying to make the box #aDiv move some pixels every second when I click the "setInterval" button, and also make it stop when I press "setTimeout" button.我对 javascript 相当陌生，当我单击“setInterval”按钮时，我试图让框#aDiv 每秒移动一些像素，并在我按下“setTimeout”按钮时让它停止。 I don't know what to write in the function called "move" without getting any errors.我不知道在名为“move”的 function 中写什么而不会出现任何错误。 If someone could please guide me through or help me I'd deeply appreciate it.如果有人可以指导我或帮助我，我将不胜感激。

Here's my code这是我的代码

<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

As it has been said, you shouldn't name your function setInterval .正如已经说过的，你不应该命名你的 function setInterval 。 You're overriding your browser's setInterval function and it is calling itself indefinitely.您正在覆盖浏览器的setInterval function 并且它无限期地调用自己。 Also, your event variable contains a DOM element, which does not make sense.此外，您的event变量包含一个没有意义的 DOM 元素。 Why not name it something like elem ?为什么不将其命名为elem ？

A good habit would also be not to add event listeners directly in your HTML ( onclick="..." ).一个好习惯也是不要直接在 HTML ( onclick="..." ) 中添加事件侦听器。

I'm not totally sure I understood your question, is this what you are trying to do?我不完全确定我理解你的问题，这是你想要做的吗？ (click the blue button below the code to try it) （点击代码下方蓝色按钮试一试）

 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