clearInterval 不起作用（原版 javascript）

Question

这是设置。我希望在 5 秒后从运行停止循环器 (setInterval())。

我有很多评论，所以应该很容易理解，有什么问题可以问我。

我试过移动 if 语句（检查计时器值 === 5000）。在setInterval函数里试过，在onClick函数里试过

我也试过运行 setInterval() 和 clearInterval() 前缀为 window。

大家有什么想法吗？

window.onload = function(){
    
    var looper;
    var degrees = 0;
    var timer = 0; // timer used to monitor how long the wheel has been spinning

    function startWheelAnimation(elementId, speed){
        // 1. get the element to rotate
        const ele = document.getElementById(elementId); // get the HTML element to rotate
        const cssRotateVal = "rotate("+degrees+"deg)"; // the CSS style rotate value
        
        // 2. CSS3 browser compatibility checks
        if(navigator.userAgent.match("Chrome")){
            ele.style.WebkitTransform = cssRotateVal;
        } else if(navigator.userAgent.match("Firefox")){
            ele.style.MozTransform = cssRotateVal;
        } else if(navigator.userAgent.match("MSIE")){
            ele.style.msTransform = cssRotateVal;
        } else if(navigator.userAgent.match("Opera")){
            ele.style.OTransform = cssRotateVal;
        } else {
            ele.style.transform = cssRotateVal;
        }
        
        // 3. start looping at the rate of speed var
        looper = setInterval( ()=>{
            // at the rate of speed var run the following code
            startWheelAnimation( elementId, speed );
        }, 
        speed);
        
        degrees++; // increment the degrees value by 1
        timer++; // increment the timer value by 1
        console.log(timer); // devtool

        if( degrees > 359 ){ // reset the degrees value back to 0 upon a full rotation
            degrees = 0;
            clearInterval(looper); // stop the wheel spinning
        }

        if( timer === 5000 ){ // after 5 seconds has passed reset the timer and stop the looper
                console.log(looper);
                timer = 0;
                clearInterval(looper); // stop the wheel spinning
            }


    }
    document.getElementById('spinButton').addEventListener("click", event => {
        const speed = 100;
        startWheelAnimation("wheel", speed);
    });
}

Answer 1

每次迭代后 - startWheelAnimation 调用，您递归地创建一个新的 setInterval 实例 (!) 并将其分配给 looper。因此 clearInterval 只清除最近的实例。

一个解决方法是检查 degrees 或 timer 是否设置为它们的起始值：

if (degrees == 0 || timer == 0) {
    looper = setInterval( ()=>{
        // at the rate of speed var run the following code
        startWheelAnimation( elementId, speed );
    }, 
    speed);
}

Answer 2

您不应该在 each 函数执行中创建新的 setTimerInterval。这将累积不同的活动间隔，您将只能参考您创建的 最后一个。

而是将那段代码移出函数，并将其放入您拥有的事件处理程序中作为 addEventListener 回调：

document.getElementById('spinButton').addEventListener("click", event => {
    const speed = 100;
    const elementid = "wheel";
    // schedule the repeated run:
    looper = setInterval( ()=>{
        // at the rate of speed var run the following code
        startWheelAnimation(elementid, speed );
    }, 
    speed);
    // also run it immediately
    startWheelAnimation(elementid, speed);
});

clearInterval 不起作用（原版 javascript）

clearInterval not working (vanilla javascript)

javascript

settimeout

setinterval

clearinterval

cleartimeout