使用d3/jquery禁用按鈕，直到動作完成

Question

如何在操作完成之前禁用按鈕？以下是我的代碼的外觀;

<audio id="audio"> 
<source src="song.mp3" type="audio/mpeg" /> 
</audio> 
<button id="button">Play</button> 
<script> 
.... 
.... 
var button = document.getElementById('button'); 
var audio = document.getElementById('audio'); 

var onClick = function() { 
audio.play(); 
d3.select('.svg') 
.append('circle') 
... 
... 
... 
}; 

button.addEventListener('click', onClick, false); 
.... 
.... 
</script> 

我試過以下，但沒有一個似乎工作;

$("#button").off(); 
d3.select("#button").attr('disabled', null); 
$('#button').prop('disabled', true); 

Answer 1

您可以使用各種media events通過<audio>觸發得到的音頻元素的狀態更新。有一種方法可以在按鈕被點擊後移除按鈕的點擊處理程序，並在完成時重新註冊處理程序，即當觸發ended事件時。

var onClick = function() { 
    // Remove the click handler when the button is clicked. 
    button.removeEventListener('click'); 
    audio.play(); 
}; 

// Re-register the click handler once playback has finished. 
audio.addEventListener("ended", function() { 
    button.addEventListener('click', onClick, false); 
} 

另一種方法可以使用標誌來跟蹤的<audio>狀態。這可能是最靈活的解決方案，因爲你可以設置各種事件處理程序監聽各種事件的標誌（播放，暫停，結束等）：

var isPlaying = false; 

audio.addEventListener("playing", function() { 
    isPlaying = true; 
} 

audio.addEventListener("ended", function() { 
    ifPlaying = false; 
} 

// Check the flag in the button's event handler. 
var onClick = function() { 
    // If this is playing, do nothing. 
    if (isPlaying) return; 

    audio.play(); 
};