保持間隔參考清除間隔

Question

即時通訊有點難倒這一個。基本上我有一段代碼，當你點擊一個div時，它會觸發下面的代碼，這會使另一個div閃爍綠色，直到再次點擊該按鈕。問題是當函數再次被調用時，對var的引用不見了，div一直閃爍。

function muteEvent(id) { 
 
    var button = "#muteBox".concat(id.charAt(id.length - 1)); 
 
    var value = $(button).css("background-color"); 
 
    var slider = "#sliderKnob".concat(id.charAt(id.length - 1)); 
 
    var animation = function() { 
 
    if ($(slider).css("background-color") == 'rgb(0, 128, 0)') { 
 
     $(slider).css("background-color", "red") 
 
    } else { 
 
     $(slider).css("background-color", "green") 
 
    } 
 
    } 
 
    if (value == 'rgb(128, 128, 128)') { 
 
    $(button).css("background-color", "red"); 
 
    var timer = setInterval(animation, 1500) 
 
    } else { 
 
    alert("here"); 
 
    clearInterval(timer); 
 
    $(button).css("background-color", "#808080"); 
 
    } 
 
}

Answer 1

clearInterval以便停止重複計時器需要的標識符（從setInterval返回）。在您撥打clearInterval時，將此標識符保存在某個範圍內 - 注意，它將以您的代碼設置的方式單獨調用muteEvent。

var intervalId = null; 
 

 
function muteEvent(id) { 
 
    var button = "#muteBox".concat(id.charAt(id.length - 1)); 
 
    var value = $(button).css("background-color"); 
 
    var slider = "#sliderKnob".concat(id.charAt(id.length - 1)); 
 
    var animation = function() { 
 
    if ($(slider).css("background-color") == 'rgb(0, 128, 0)') { 
 
     $(slider).css("background-color", "red") 
 
    } else { 
 
     $(slider).css("background-color", "green") 
 
    } 
 
    } 
 
    if (value == 'rgb(128, 128, 128)') { 
 
    $(button).css("background-color", "red"); 
 
    intervalId = setInterval(animation, 1500) 
 
    } else { 
 
    alert("here"); 
 
    clearInterval(intervalId); 
 
    $(button).css("background-color", "#808080"); 
 
    } 
 
} 
 

 
$("#muteBox2").click(muteEvent.bind(null, "2"));

#muteBox2 { 
 
    background-color: rgb(128,128,128); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="muteBox2">Mute</div> 
 
<div id="sliderKnob2">Slider</div>