1

我正在制作一个软按钮并添加一个帮助语音按钮。OnClick 改变图像（soundon）并开始声音。现在我添加了一个设置超时，以便在音频结束时图像更改（声音关闭），但是如果我启动它并停止它，超时不会停止，当我再次按下它时，图像会在时间之前更改

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

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

2 张图片 | soundon.png 和 soundoff.png 和
1 个音频 | 帮助声音.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">
4

1 回答 1

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;
    }
}
于 2013-11-02T10:36:34.867 回答