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

您可以使用由<audio>触发的各种media events来获取有关音频元素状态的更新。一种方法可能会在单击按钮时删除按钮的单击处理程序，并在播放完成时重新注册处理程序，即触发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(); 
};

使用d3 / jquery禁用按钮，直到操作完成

1 个答案: