ClearInterval 不起作用，以下 setInterval 以 2 倍速度重新启动

Question

我有一个简单的幻灯片我想要一个“暂停”和“播放”功能，使用 onClick，使用 setInterval 和 clearInterval。第一个 setInterval 效果很好。下面的 clearInterval 在循环中创建一个暂停，但不重置 intervalId，因此，下一个 setInterval 是运行快。我在这里看到了一些关于这个问题的 post，但它们并没有解决我的问题。如果有人能帮助我，那就太好了！

let i = 0;
var elements = document.querySelectorAll('.mes_elements');

function ma_fonction(){ 
    elements[i].style.opacity = 1;
    for(let j = 0; j < elements.length; j++){  
        if(j!=i){  
            elements[j].style.opacity = 0;
        }
    }
    i++;
    if(i == elements.length){ i = 0; }
}

var lecture = true;
var intervalId = setInterval(ma_fonction, 1500);

document.querySelector('.ma_div').addEventListener('click', function() {
    if(lecture == true){
        clearInterval(intervalId);
        // window.clearInterval(intervalId);  doesn't work to
        lecture = false;
    }else{ 
        setInterval(ma_fonction, 1500);
        // window.setInterval(ma_fonction, 1500);   doesn't work to
        lecture = true;
    } 
});

.mes_elements {
   padding:1em;
   background:blue;
   margin: 1em;
}

<div class="ma_div">
        <div class="mes_elements"></div>
        <div class="mes_elements"></div>
        <div class="mes_elements"></div>
</div>

Answer 1

在你的代码中

 }else{ 
        setInterval(ma_fonction, 1500);
        // window.setInterval(ma_fonction, 1500);   doesn't work to
        lecture = true;
    }

您没有将 intervalId 设置为新的 setTimeout，因此您只会清除第一个，然后清除一个空变量。

改为

 }else{ 
        intervalId = setInterval(ma_fonction, 1500);
        // window.setInterval(ma_fonction, 1500);   doesn't work to
        lecture = true;
    }

ClearInterval 不起作用，以下 setInterval 以 2 倍速度重新启动

ClearInterval doesn't work, the following setInterval restart with 2x speed

javascript

onclick

addeventlistener

setinterval

clearinterval