Javascript 如何在设置新超时之前清除所有运行超时

当我同时单击麦克风图标两次时，它会返回到非活动状态，但超时功能仍会发生

以下是我的控制台值：

true
false
false

true
false

而不是：

true
false
false

true
false

如何防止这种情况发生

// Start listening on click.
var active= false;
var $mic = $("#mic-container");
$mic.click(function(event){
    //event.preventDefault();
    // if we're recording when the button is clicked
    if(active) {
        $mic.removeClass("active pulse");
        active=false; console.log(active);
        annyang.abort();                    
    // if we're not recording when the button is clicked
    } else {
        annyang.start({ autoRestart: false, continuous: false });                       // start listening
        active = true;                   console.log(active);   // set recording var to true
        $mic.addClass('active pulse');          // turn on active class
        setTimeout(function(){ 
            $mic.removeClass("active pulse");      
            active=false;  console.log(active);
            annyang.abort();                
        }, 8000);
    }
});

annyang.addCallback('resultNoMatch', function () {
    $('.myErrorText').html('Try saying a valid command. See <a href="help.html" data-ajax="false">help</a> section for a list of valid commands!');
    $mic.addClass("result-no-match");
    setTimeout(function(){ 
        $mic.removeClass("active pulse result-no-match");
        active=false;  console.log(active);
        annyang.abort();
    }, 500);
});

annyang.addCallback('resultMatch', function () {
    $('.myErrorText').text('');
    $mic.addClass("result-match");
    setTimeout(function(){ 
        $mic.removeClass("active pulse result-match");
        active=false;  console.log(active);
        annyang.abort();
    }, 500);
});

//单击开始侦听。
var-active=false；
变量$mic=$（“#mic容器”）；
$mic.单击（功能（事件）{
//event.preventDefault（）；
//如果我们在点击按钮时录制
如果（活动）{
$mic.removeClass（“活动脉冲”）；
active=false；console.log（active）；
annyang.abort（）；
//如果我们在点击按钮时没有录制
}否则{
annyang.start（{autoRestart:false，continuous:false}）；//开始侦听
active=true；console.log（active）；//将记录变量设置为true
$mic.addClass（'active pulse'）；//打开active class
setTimeout（函数（）{
$mic.removeClass（“活动脉冲”）；
active=false；console.log（active）；
annyang.abort（）；
}, 8000);
}
});
annyang.addCallback（'resultNoMatch'，函数（）{
$（'.myerrertext'）.html（'尝试说出有效命令。有关有效命令的列表，请参阅部分！'）；
$mic.addClass（“结果不匹配”）；
setTimeout（函数（）{
$mic.removeClass（“活动脉冲结果不匹配”）；
active=false；console.log（active）；
annyang.abort（）；
}, 500);
});
annyang.addCallback（'resultMatch'，函数（）{
$（'.myerrotext'）.text（''）；
$mic.addClass（“结果匹配”）；
setTimeout（函数（）{
$mic.removeClass（“活动脉冲结果匹配”）；
active=false；console.log（active）；
annyang.abort（）；
}, 500);
});

问题在于，超时正在启动，而以前单击的超时仍在计数

您必须跟踪活动超时，如果用户再次单击时超时正在运行，则取消这些超时

这是可能的，因为返回一个可以传递给的标识符（正如函数名所示），可以取消超时

例如：

var resultMatchTimeout; // Variable to store a reference to a timeout in.
annyang.addCallback('resultMatch', function () {
    $('.myErrorText').text('');
    $mic.addClass("result-match");

    if(resultMatchTimeout){ // If a timeout is running, cancel it.
        clearTimeout(resultMatchTimeout);
        resultMatchTimeout = null;
    }

    resultMatchTimeout = setTimeout(function(){ // Save a reference to the current timeout.
        $mic.removeClass("active pulse result-match");
        active=false;  console.log(active);
        annyang.abort();
    }, 500);
});

var resultMatchTimer = null;

// stops the timer
if(resultMatchTimer) {
    clearTimeout(resultMatchTimer);
    resultMatchTimer = null;
}

// starts the timer
resultMatchTimer = setTimeout(..., ...);

显然，对于其他

setTimeout

调用，您也必须这样做。

---

只需确保为每个超时使用不同的变量，否则，将取消错误的超时。

将超时分配给一个变量，然后在要终止计时器时调用clearTimeout（）方法。例如：

var resultMatchTimeout; // Variable to store a reference to a timeout in.
annyang.addCallback('resultMatch', function () {
    $('.myErrorText').text('');
    $mic.addClass("result-match");

    if(resultMatchTimeout){ // If a timeout is running, cancel it.
        clearTimeout(resultMatchTimeout);
        resultMatchTimeout = null;
    }

    resultMatchTimeout = setTimeout(function(){ // Save a reference to the current timeout.
        $mic.removeClass("active pulse result-match");
        active=false;  console.log(active);
        annyang.abort();
    }, 500);
});

var resultMatchTimer = null;

// stops the timer
if(resultMatchTimer) {
    clearTimeout(resultMatchTimer);
    resultMatchTimer = null;
}

// starts the timer
resultMatchTimer = setTimeout(..., ...);

---

您应该将setTimeout的结果（句柄）存储在var中，并在该句柄上调用clearTimeout

var timeoutHandle = setTimeout(...);
clearTimeout(timeoutHandle); // this will clear the timeout.

有了正确的作用域，您可以从所有单击中调用clearTimeout，并决定需要3个句柄来单独清除它们，或者只使用一个表单all SetTimeout并将其清除。当调用新的setTimeout时，您的句柄将被覆盖，因此请确保在此之前清除另一个超时。

每个

setTimeout（）

返回一个唯一的Id，该Id可用于使用

clearTimeout

清除超时

我可以看到有多个计时器正在运行，因此您可以将每次从

setTimeout

方法返回的所有ID存储在一个数组中，并使用同一个数组清除循环中的所有

计时器

MDN参考：

JS代码：

var myVar;

function myFunction() {
   myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

注意：这只是一个通用的解决方案，它可以作为最终/实际解决方案的基础，即使我有同样的问题。试试这个

// Start listening on click.       
    var timeoutHandle;
    var active= false;
    var $mic = $("#mic-container");
    $mic.click(function(event){
            //event.preventDefault();
            if(active)
                annyang.abort();
            else 
                annyang.start({ autoRestart: false, continuous: false});                        

    });

    annyang.addCallback('start', function () {
        active = true;              console.log(active);     
        $mic.addClass('active pulse');  
        window.clearTimeout(timeoutHandle);
        timeoutHandle = setTimeout(annyang.abort, 5000);

    });

    annyang.addCallback('end', function () {
        window.clearTimeout(timeoutHandle);
        timeoutHandle = setTimeout(function () {$mic.removeClass("active pulse result-match result-no-match");}, 200);
        active=false; console.log(active);
    });

    annyang.addCallback('resultNoMatch', function () {
        $mic.addClass("result-no-match");
        $('.myErrorText').html('Try saying a valid command. See <a href="help.html" data-ajax="false">help</a> section for a list of valid commands!');
    });

    annyang.addCallback('resultMatch', function () {
        $('.myErrorText').text('');
        $mic.addClass("result-match");
    });

//单击开始侦听。
var超时句柄；
var-active=false；
变量$mic=$（“#mic容器”）；
$mic.单击（功能（事件）{
//event.preventDefault（）；
如果（活动）
annyang.abort（）；
其他的
annyang.start（{autoRestart:false，continuous:false}）；
});
annyang.addCallback（'start'，函数（）{
active=true；console.log（active）；
$mic.addClass（‘活动脉冲’）；
clearTimeout（timeoutHandle）；
timeoutHandle=setTimeout（annyang.abort，5000）；
});
annyang.addCallback（'end'，函数（）{
clearTimeout（timeoutHandle）；
timeoutHandle=setTimeout（函数（）{$mic.removeClass（“活动脉冲结果匹配结果不匹配”）；}，200）；
active=false；console.log（active）；
});
annyang.addCallback（'resultNoMatch'，函数（）{
$mic.addClass（“结果不匹配”）；
$（'.myerrertext'）.html（'尝试说出有效命令。有关有效命令的列表，请参阅部分！'）；
});
annyang.addCallback（'resultMatch'，函数（）{
$（'.myerrotext'）.text（''）；
$mic.addClass（“结果匹配”）；
});
还要考虑一件事：根据实际的语音识别引擎状态而不是用户点击设置激活/未激活状态。
检查annyang.isListening（）
你不能只清除所有超时，那么你将在
$mic上留下零散的类不可能你需要3个不同的超时句柄。。。当清除它们时，也会清理类。你不能只清除所有超时，那么你会在
$mic
@Cerbrus上留下零散的类。你能简单解释一下这是怎么可能的吗？你说“那”是什么意思？此外，不要在答案中添加诸如“快乐编码：）”之类的噪音。它没有任何价值。@dreamweiver：如果这将导致一场持续的讨论，那么这个问题应该被认为过于宽泛。我们的目标是在这里创建一个可重用的编程知识库，而不是社交互动，所以是的，我们确实消除了噪音。@dreamweiver:那么也许这不是适合你的网站？同样，我们的目标是制作高质量的内容，而不仅仅是针对输入问题的人。查看问题和答案的大多数观众都是来自Searche的人