clearInterval 后返回

Question

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

代码：

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

你 state 你有问题的部分，

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

目前只运行一次：第一次调用 Start() 时。 那时，两个条件都为假，因为变量的初始声明值为true 。

您可以创建一个新的setInterval以每隔一段时间运行此if语句，但这似乎没有必要，因为您当前的 stopY function实际上是您知道 xIsMoving 和 yIsMoving 均为假的地方——因为 stopY 仅在 stopX 运行后运行。 因此，只需将stopped=true语句移动到 stopY function 的末尾：

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