样式更改和 setTimeout 问题答案

【问题标题】：style change and setTimeout issues样式更改和 setTimeout 问题
【发布时间】：2015-06-03 20:12:30
【问题描述】：

我想通过更改 style.left 值并使用 settimeout() 来控制更改间隔，从而在屏幕上缓慢移动元素。

为了开始这个序列，我对 body onload 中的函数使用了 settimeout。

然后在函数结束时延迟调用相同的函数以继续序列。

问题似乎是 style.left 值更改会导致重新加载，从而导致 onload 计时器再次触发。一旦您打开页面，即使超时延迟为 5 秒，该元素也会在屏幕上闪烁到其最终位置。 ??

我知道较新的 css 动画技术，但它们不符合我的需要。

上面的段落是正确的假设吗？？

【问题讨论】：

你能发布你的 JS 吗？
也许你应该试试setInterval 而不是setTimeout。见here
是的，setTimeout 不应该导致重新加载。还有一些其他代码让您感到困惑。请提供一个 jsfiddle。
您的问题可能与“延迟召回”有关，您是否尝试过没有查看初始动画是否有效。如果是这样，那么正如@zgood 已经说过的那样， setInterval 可能是您正在寻找的东西。正如其他人所说，代码是我们的朋友。

标签： javascript css settimeout reload

【解决方案1】：

这里最大的问题是您使用的是 SetTimeout 而不是 SetInterval。您可以使用 SetInterval 轻松完成此操作。我包括一个 jsfiddle 示例：http://jsfiddle.net/33n99haj/1/

<div id="box" style="width:30px;height:30px;background-color:red;position:absolute;"></div>

window.e = document.getElementById("box");
var i = 0;

setInterval(function () {
    i = i + 20;
    window.e.style.left = i + "px";;
},1000);

不要忘记你的位置在你的 CSS 中应该是绝对的

【讨论】：