停止动画 div 的 settimeout 增量答案

【问题标题】：stop settimeout incremention for an animated div停止动画 div 的 settimeout 增量
【发布时间】：2012-05-01 20:45:52
【问题描述】：

我有一个函数可以增加 div 层位置的 css 质量，并且需要它在向右或向左达到一定百分比时停止（取决于层）。我尝试使用大于运算符执行 if 语句，但似乎不起作用。这是完整的代码：

<html>
<head>
<title>Stelucir</title>
<style>
body {
  background-color: white;
}
#bg-right {
  background-color: black;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: -1;
}
</style>
<script type="text/javascript">

var header = null; // object
var about = null; // object
var blog = null; // object
var forum = null; // object
var chat = null; // object
var home = null; // object

function doMove() {
  header.style.right = parseInt(header.style.right)+1+'%';
  about.style.left = parseInt(about.style.left)+1+'%';
  blog.style.right = parseInt(blog.style.right)+1+'%';
  forum.style.left = parseInt(forum.style.left)+1+'%';
  chat.style.right = parseInt(chat.style.right)+1+'%';
  home.style.left = parseInt(home.style.left)+1+'%';
  setTimeout(doMove,30); // call doMove in 20msec
}

function init() {
  header = document.getElementById('header');
  about = document.getElementById('about');
  blog = document.getElementById('blog');
  forum = document.getElementById('forum');
  chat = document.getElementById('chat');
  home = document.getElementById('home'); 
  doMove(); // start animating
}

window.onload = init;

</script>
</head>
<body>
<div id="bg-right"></div>
<div id="header" style = "position:absolute;right:25%;font-size:80px;">Stelucir</div>
<div id="about" style = "position:absolute;left:40%;font-  size:40px;top:90px;color:white;">About</div>
<div id="blog" style = "position:absolute;right:40%;font-size:40px;top:130px;">Blog</div>
<div id="forum" style = "position:absolute;left:40%;font-size:40px;top:170px;color:white;">Forum</div>
<div id="chat" style = "position:absolute;right:40%;font-size:40px;top:210px;">Chat</div>
<div id="home" style = "position:absolute;left:40%;font-size:40px;top:250px;color:white;">Home</div>
</body>
</html>

【问题讨论】：

if 声明在哪里？
我说我试过了但没用，我没有说我将它包含在代码中，我提到的是为了保存我已经尝试过的东西的建议。
嗯，if 声明几乎肯定会涉及。包含您尝试过但不起作用的内容通常很有用，以便人们可以解释如何解决它。

标签： javascript animation settimeout

【解决方案1】：

使用全局布尔值。从 true 开始，当它达到你想要的任何点时，将其设置为 false。在 doMove 中检查是否为 true，如果为 false，则返回。

【讨论】：

【解决方案2】：

setTimeout() 返回计时器的句柄。然后你可以在这个句柄上调用clearTimeout() 来停止计时器。

创建一个全局变量来存储它

var timer = null;
...
function doMove() {
    ...
    timer = setTimeout(...);
}
//somewhere else
clearTimeout(timer);

【讨论】：

【解决方案3】：

我更建议使用间隔而不是多个 setTimeout 调用。 setInterval 和 setTimeout 都返回一个引用，可以使用 clearInterval(ref) 或 clearTimeout(ref) 来阻止它们；

这里有一个小小提琴，它可以让一个盒子向右移动并在它出现时停止。

http://jsfiddle.net/JV35w/1/

var elem = document.getElementById('foo'),
    startX = 0,
    endX = 400,
    move = function() {
        elem.style.left = startX + 'px';
        startX += 10;
        if (endX === startX) {
            startX = 0;
            clearInterval(t);
        };
    },
    doMove = function() {
        t = setInterval(move);
    },
    t;

doMove();

https://developer.mozilla.org/en/DOM/window.setTimeout

https://developer.mozilla.org/en/DOM/window.setInterval

【讨论】：