Question

我只是尝试了一些JS动画，并且我已经动画了一个在边框内移动的框，但我希望当框碰到其中一个边框时动画停止。这是我使用的功能之一：

function AnimMoveRight() {
    var interval = setInterval("moveRight(10)", 40);
    if (hitRight == true) {
        clearInterval(interval);
    }
}

moveRight(10)将框的位置更改为右侧10个像素。当框碰到右边框时，hitRight设置为true。好吧，显然，这段代码不起作用，只是继续循环moveRight()函数。现在，我的问题是，如何从AnimMoveRight()函数中取消区间？

Answer 1

function AnimMoveRight() {
    var interval;
    function fnc(){
        if (hitRight == true) {
            window.clearInterval(interval);
        }
        else{
            moveRight(10);
        }
    }
    interval = setInterval(fnc, 40);
}

Answer 2

如果你在移动之前检查它是否已经击中它，它只会调用animate函数，如果它还没有到达右侧，我将该函数调到setTimeout，我认为这更适合任务。

function AnimMoveRight() {
    if (hitRight !== true) {
        moveRight(10);
        setTimeout(AnimMoveRight,40);
    }
}

Answer 3

一个选项是完全摆脱setInterval并且每次迭代都会调用setTimeout而不会导致边界命中：

function AnimMoveRight() {

    // Do stuff here

    if (!hitRight) {
        var nextCall = setTimeout("moveRight(10)", 40);
    }
}

Answer 4

使用setTimeout代替setInterval以获得更好的控制权。
设置计时器时使用函数而不是字符串。
常见的惯例是以小写字母开始函数名称。
直接检查truthy / falsy表达式，而不是将它们与布尔值进行比较。

    function animMoveRight() {
        moveRight(10);

        if (!hitRight) {
            setTimeout(animMoveRight, 40);
        }
    }

Answer 5

我会说，只需将clearInterval();移出AnimMoveRight();，然后对hitRight进行全局检查。并且，如果是真的，那么清除间隔。

或者，在全局范围内定义interval变量，并在AnimMoveRight();设置它。然后你也可以在AnimMoveRight();内清除它。没有测试过，但我认为两种选择都可以。

Answer 6

您需要在moveRight() *内取消间隔。诀窍是让moveRight()知道intervalId是什么。您是否需要公开moveRight()公开？如果没有，您可以将其放在AnimMoveRight：

中

function AnimMoveRight() {
    function moveRight(n) {
        // do stuff
        if (hitRight) {
            clearInterval(interval);
        }
    }
    var interval = setInterval(function() { moveRight(10); }, 40);
}

其他选项包括将interval作为参数传递给moveRight：

var interval = setInterval(function() { moveRight(10, interval); }, 40);

或者在moveRight()电话后立即执行：

var interval = setInterval(function() {
    moveRight(10);
    if (hitRight) {
        clearInterval(interval);
    }
}, 40);

* 这最后一个实际上会根据您的要求取消AnimMoveRight()内的时间间隔。

Answer 7

将间隔句柄保存为全局，并在moveRight中检查是否需要取消，如果是，则取消它。

更好的是，使用闭包，以便moveRight函数可以到达间隔句柄，而不必使其成为全局。

var interval = setInterval（function（）{moveRight（10，interval）;}，40）;

Answer 8

使用此：

function AnimMoveRight() {
    var interval;
    function animate() {
      var hitRight = moveRight(10);
      if (hitRight)
        clearInterval(interval);
    }
    interval = setInterval(animate, 40);
}

请注意，您的moveRight将返回true | false。

当变量设置为true时，如何清除计时器？

8 个答案: