时间戳

首页 > 解决方案 > ClearInterval 不起作用，下面的 setInterval 以 2 倍速度重启

javascript - ClearInterval 不起作用，下面的 setInterval 以 2 倍速度重启

问题描述

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

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>

标签： javascriptonclicksetintervaladdeventlistenerclearinterval

解决方案

在您的代码中

 }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;
    }

推荐阅读