clearInterval后返回

Question

我有一个在函数中运行setInterval的代码。我试图实现的是在clearInterval发生后退出该函数。我设置了一个条件来检查间隔是否被清除。我很难根据代码的当前状态找到从主Start()函数返回的方法。

代码：

function Start() {

    var elementX = document.getElementById('moveMeX')
    var elementY = document.getElementById('moveMeY')
    elementY.style.top = "0px"

    var posX = 0
    startPosX = 0
    var posY = 0
    startPosY = 0
    var speed = 1
    var xIsMoving = true
    var yIsMoving = true

    var myIntervalX = setInterval(function() {
        if(startPosX == 0) {
            posX+=speed
            elementX.style.left = posX + 'px'
            if(posX==100) {
                startPosX = 100
            }
        }
        else if (startPosX==100) {
            posX-=speed
            elementX.style.left = posX + 'px'
            if(posX==0) {
                startPosX = 0
            }
        }
    }, 10);
    
    function stopX() {
        clearInterval(myIntervalX);
        xIsMoving = false
    }
    
    elementX.addEventListener("mousedown", stopX);
    elementX.addEventListener("mousedown", startY);
    
    function startY() {
        var myIntervalY = setInterval(function() {
            if(startPosY == 0) {
                posY+=speed 
                elementY.style.top = posY + 'px'
                if(posY==100) {
                    startPosY = 100
                }
            }
            else if (startPosY==100) {
                posY-=speed
                elementY.style.top = posY + 'px'
                if(posY==0) {
                    startPosY = 0
                }
            }
        }, 10);
    
        function stopY() {
            elementY.style.zIndex = "-1";
            clearInterval(myIntervalY);
            yIsMoving = false
        }
        
        elementY.addEventListener("mousedown", stopY);
    }

    if (xIsMoving === false && yIsMoving === false) {
        console.log('stopped')
        stopped = true
    }
}

Start()

代码链接：https://codepen.io/silentstorm902/pen/podNxVy

Answer 1

你说你有问题的那部分，

if (xIsMoving === false && yIsMoving === false) {
    console.log('stopped')
    stopped = true
}

当前只运行一次:何时首次调用Start()。当时，这两个条件都是假的，因为变量的初始值声明为true。

您可以创建一个新的setInterval来经常运行这个if语句，但这似乎没有必要，因为当前的stopY函数实际上是您知道xIsMoving和yIsMoving都是假的地方--因为stopY只在stopX运行之后才运行。因此，只需将stopped=true语句移到stopY函数的末尾：

function stopY() {
    elementY.style.zIndex = "-1";
    clearInterval(myIntervalY);
    yIsMoving = false;
    console.log("stopped");
    stopped = true;
}