如何在setTimeout期間停止點擊效果？

我有一個簡單的函式，它每 x 秒改變 div 的不透明度。當我單擊“暫停按鈕”時，此按鈕會在此回圈中暫停，并獲取當前 div 的顏色。當我第二次單擊此按鈕時，回圈將在 setTimeout 后重新開始播放。我的問題是，當我多次單擊（快速）按鈕時，回圈中存在錯誤。我的布林值不起作用。在 SetTimeout 期間，是否有使用 stopPropagation 或 e.preventDefault 或其他方式停止單擊效果的解決方案？謝謝！

 <div class="div_parent">
    <div class="div_child div_child_one"></div>
    <div class="div_child div_child_two"></div>
    <div class="div_child div_child_three"></div>
    <div class="div_child div_child_four"></div>
</div>
<div class="my_button">PAUSE BUTTON</div>


var j = 0;
var myElements = document.querySelectorAll('.div_child');
var myButton = document.querySelector('.my_button');

var colorArray = []
for(let i=0; i<myElements.length; i  ){
    let currentColor = getComputedStyle(myElements[i]).backgroundColor;
    colorArray[i] = currentColor;
}

function my_fonction(){ 
    myElements[j].style.opacity = 1;
    for(let k = 0; k < myElements.length; k  ){ 
        if(k!=j){  
            myElements[k].style.opacity = 0;
        }
    }
    j  ;
    if(j == myElements.length){ j = 0}
    playForbidden = false;
}

function setIntervalAndExecuteFn(fn, t){
    fn();
    return(setInterval(fn, t));  
}

var myIndice = j;
var myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
var play = true;
var playForbidden = false;

myButton.addEventListener('click', function(){
    if(playForbidden == false){
        if(play == true){
            play = false;
            clearInterval(myIntervalId);
            if(j == 0){
                myIndice = myElements.length-1;
            }else{
                myIndice = j-1;
            }
            myButton.style.backgroundColor = colorArray[myIndice]
        }else{
            play = true;
            myButton.style.backgroundColor = 'transparent';
            setTimeout(function() {
                myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);  
            }, 500);
        }
        playForbidden == true;
    }else{
        return;
    }
});


.div_parent{
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid black;
}
.my_button{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    padding: 20px;
    color: black;
}
.div_child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
    height: 300px;
}
.div_child_one{
    opacity: 0;
    background-color: red;
}
.div_child_two{
    opacity: 0;
    background-color: green;
}
.div_child_three{
    opacity: 0;
    background-color: violet;
}
.div_child_four{
    opacity: 0;
    background-color: rgb(104, 104, 104);
}

uj5u.com熱心網友回復：

您的代碼中的問題是setTimeout函式。當你執行你的setTimeout，你所說的是“在 0.5 秒內開始間隔”。但問題是，如果您再次快速（在 0.5 秒內）再次單擊暫停，則該命令不會停止。您可以做的是在每次單擊按鈕時清除超時。這樣，您可以取消“以 0.5 秒為間隔開始”命令。

您可以在下面看到我的意思的作業片段：

var j = 0;
var myElements = document.querySelectorAll('.div_child');
var myButton = document.querySelector('.my_button');

var colorArray = []
for(let i=0; i<myElements.length; i  ){
    let currentColor = getComputedStyle(myElements[i]).backgroundColor;
    colorArray[i] = currentColor;
}

function my_fonction(){ 
    myElements[j].style.opacity = 1;
    for(let k = 0; k < myElements.length; k  ){ 
        if(k!=j){  
            myElements[k].style.opacity = 0;
        }
    }
    j  ;
    if(j == myElements.length){ j = 0}
    playForbidden = false;
}

function setIntervalAndExecuteFn(fn, t){
    fn();
    return(setInterval(fn, t));  
}

var myIndice = j;
var myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
var myTimeoutId;
var play = true;
var playForbidden = false;

myButton.addEventListener('click', function(){
    clearTimeout(myTimeoutId);
    if(playForbidden == false){
        if(play == true){
            play = false;
            clearInterval(myIntervalId);
            if(j == 0){
                myIndice = myElements.length-1;
            }else{
                myIndice = j-1;
            }
            myButton.style.backgroundColor = colorArray[myIndice]
        }else{
            play = true;
            myButton.style.backgroundColor = 'transparent';
            myTimeoutId = setTimeout(function() {
                myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
            }, 500);
        }
        playForbidden == true;
    }else{
        return;
    }
});

.div_parent{
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid black;
}
.my_button{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    padding: 20px;
    color: black;
}
.div_child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
    height: 300px;
}
.div_child_one{
    opacity: 0;
    background-color: red;
}
.div_child_two{
    opacity: 0;
    background-color: green;
}
.div_child_three{
    opacity: 0;
    background-color: violet;
}
.div_child_four{
    opacity: 0;
    background-color: rgb(104, 104, 104);
}

<div class="div_parent">
    <div class="div_child div_child_one"></div>
    <div class="div_child div_child_two"></div>
    <div class="div_child div_child_three"></div>
    <div class="div_child div_child_four"></div>
</div>
<div class="my_button">PAUSE BUTTON</div>

標籤：javascript 循环 布尔值 设置超时 添加事件监听器

上一篇：阻止useState呈現初始值

下一篇：單擊事件以在chartsJS中顯示餅圖切片的名稱