Question

我想使用setInterval来连续检查div的位置并仅触发一次事件。

基本上，我正在创建一个非常简单的游戏 - 我有一个sheep div，可以在页面上左右移动。我想在sheep到达某一点时触发一个事件。

我使用setInterval来检查绵羊每200毫秒的位置 - 如果它超过100px它会创建一个位置警报。问题是setInterval每隔200毫秒继续触发警报，而我只希望它发生一次。

    var positionInterval = setInterval(function(){
        var sheepPosition = sheep.position();
            if (sheepPosition.left > 100) {
                alert(sheepPosition.left);
                sheepPosition = 0;
            }
    },200);

我认为通过在IF函数的末尾包含sheepPosition = 0会阻止它重复，但我意识到这不会起作用，因为那只是修改IF函数内部的变量，而且每次都是新的时间间隔开始sheepPosition的值取自sheep.position。

那么如何阻止setInterval重复多次？

我还尝试使用变量计数器和clearInterval：

var intervalCounter = 0;

var positionInterval = setInterval(function(){
        var sheepPosition = sheep.position();
            if (sheepPosition.left > 100) {
                alert(sheepPosition.left);
                intervalCounter = 1;
            }
    },200);

setInterval(function(){
        if (intervalCounter === 1) {
           positionInterval.clearInterval;
        }
    },200);

但这也不起作用。有什么建议吗？

Answer 1

使用以下

clearInterval(positionInterval);

Answer 2

您不必设置另一个间隔来检查第一个间隔。您可以直接在positionInterval内完成。所以：

var positionInterval = setInterval(function() {
    var sheepPosition = sheep.position();
        if (sheepPosition.left > 100) {
            alert(sheepPosition.left);
            clearInterval(positionInterval);
        }
}, 200);

如何停止setInterval

2 个答案: