Question

我想使用setInterval为元素设置动画。我已将代码放入一个对象中，其中一个functions用于初始化，另一个用setInterval进行动画处理。当我尝试运行代码时动画工作一次然后导致浏览器挂起。我唯一能想到的就是在某处创建了一个无限循环，但是我在代码中的任何地方都看不到会导致这种情况。

导致浏览器崩溃的原因是什么可以克服？

<div id='box' style='position:absolute;height:100px;width:100px;background-color:#44e'>box</div>
<script>
var box = {
init : function(elemId) {
    box.elem = document.getElementById(elemId);
box.timer = setInterval;
    box.tick = 0;

    box.animate();
},
animate: function() {
    if(box.tick < 100) {
        box.elem.style.top = box.tick +'px';
        box.elem.style.left = box.tick +'px';
        box.tick++;
    } else {
        clearInterval(box.timer);
    }
    var timer = setInterval(box.animate, 50)
}
}
box.init('box');
</script>

Answer 1

setInterval设置一个将被浏览器重复重复的功能，直到您取消间隔计时器。您的代码没有这样做，因为对clearInterval的唯一调用是使用box.timer，它永远不会设置为计时器句柄（来自setInterval的返回值）。因此，您最终会调度数千个调用（每次调用animate时都会生成一个新系列）并使浏览器陷入困境。

至少，这个：

var timer = setInterval(box.animate, 50)

应该是：

box.timer = setInterval(box.animate, 50);

或者您可能需要setTimeout（仅安排一次回调）。

setInterval工作然后挂起浏览器javascript

1 个答案: