如何停止 setInterval [重复]

Question

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

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

我正在使用 setInterval 每 200 毫秒检查一次羊的位置 - 如果超过 100 像素，它会在该位置创建一个警报。问题是 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);