Question

我＆＃39;制作软件并添加帮助语音按钮。 OnClick转换为图像（声音）并开始声音。现在我添加了一个设置超时，以便在音频结束时图像发生变化（声音关闭），但是如果我启动它并且停止它时停止不停止，当我再次按下时图像会在时间之前发生变化

主要问题是如果我按下按钮开始发声并再次按下它以停止它（在声音结束前5秒后停止）如果我再次点击开始，图像会在音频停止前5秒改变。

我需要Javascript代码，而不是jQuery。

2张图片| soundon.png和soundoff.png 和
1音频| helpsound.mp3

这是代码：

JAVASCRIPT

var clickNumber = 2;
function sound(soundfile) {

image = document.getElementById('snd')
switch (clickNumber) {
    case 1:                                                     
    document.getElementById('snd').src = "images/soundoff.png";
    document.getElementById("dummy").innerHTML= "";

    clickNumber = 2;
    return(false);

    case 2:
    document.getElementById('snd').src = "images/sound.png";
    document.getElementById("dummy").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\"/>";

    setTimeout
        (
        function()
            {
        document.getElementById('snd').src = "images/soundoff.png";
            },10000                     
        );
    clickNumber = 1;
    break;
     }
}

HTML

<img src="images/soundoff.png" title="Turn On/Off Help Speech" onclick="sound('helpsound.mp3');" name="soundimg" id="snd">

Answer 1

您可以使用clearTimeout取消计时器：

var clickNumber = 2,
    timeoutId = null;

function sound(soundfile) {
    image = document.getElementById('snd');
    switch (clickNumber) {
        case 1:                                                     
        image.src = "images/soundoff.png";
        document.getElementById("dummy").innerHTML= "";

        if(timeoutId !== null) {
            clearTimeout(timeoutId);
            timeoutId = null;
        }

        clickNumber = 2;
        return(false);

        case 2:
        image.src = "images/sound.png";
        document.getElementById("dummy").innerHTML='<embed src="' + soundfile + '" hidden="true" autostart="true" loop="false" />';

        timeoutId = setTimeout(
            function() {
                image.src = "images/soundoff.png";
            },10000
        );
        clickNumber = 1;
    }
}

设置超时以在任何条件下停止

1 个答案: