如何在jQuery中停止使用setInterval的函数？（附语音识别场景代码）

首先看你的代码，目前的问题主要出在无法访问语音识别实例以及错误的停止方式上。咱们一步步来修复：

核心问题分析 #

你在startConverting()函数内部创建了speechRecognizer变量，但它是局部变量，外部的结束按钮点击事件根本拿不到这个实例，自然没法调用它的停止方法。另外你代码里的stop.startConverting()是完全错误的写法，而且那个自动触发点击的setTimeout也会导致识别重新启动，得一起处理。

修复后的完整代码 #

// 把语音识别实例和定时器ID提升到外部作用域，让所有事件都能访问
let speechRecognizer = null;
let restartTimeout = null;

function startConverting() {
    const clinicalNotesArea = $("#clinicalNotesArea").val();
    if ('webkitSpeechRecognition' in window) {
        speechRecognizer = new webkitSpeechRecognition();
        speechRecognizer.continuous = true;
        speechRecognizer.interimResults = true;
        speechRecognizer.lang = 'en-IN';
        speechRecognizer.start();

        let finalTranscripts = '';
        speechRecognizer.onresult = function(event) {
            let interimTranscripts = '';
            for (let i = event.resultIndex; i < event.results.length; i++) {
                let transcript = event.results[i][0].transcript;
                transcript.replace("\n", "<br>");
                if (event.results[i].isFinal) {
                    finalTranscripts += transcript;
                } else {
                    interimTranscripts += transcript;
                }
            }
            $("#clinicalNotesArea").val(clinicalNotesArea + " " + finalTranscripts + interimTranscripts);
        };

        speechRecognizer.onerror = function(event) {};
    } else {
        $("#clinicalNotesArea").val(clinicalNotesArea + 'Your browser is not supported. If google chrome, please upgrade!');
    }

    // 保存定时器ID，方便后续清除
    restartTimeout = setTimeout(function() {
        $('#clinicalNotesMicrophoneStart').trigger('click');
    }, 600);
};

$("#clinicalNotesMicrophoneStart").click(function() {
    $("#clinicalNotesMicrophoneEnd").attr('hidden', false);
    $("#clinicalNotesMicrophoneStart").attr('hidden', true);
    startConverting();
});

$("#clinicalNotesMicrophoneEnd").click(function() {
    $("#clinicalNotesMicrophoneEnd").attr('hidden', true);
    $("#clinicalNotesMicrophoneStart").attr('hidden', false);

    // 停止语音识别实例
    if (speechRecognizer) {
        speechRecognizer.stop();
        speechRecognizer = null; // 重置实例，避免重复操作
    }

    // 清除自动重启的定时器
    if (restartTimeout) {
        clearTimeout(restartTimeout);
        restartTimeout = null;
    }
});

关键修改点 #

• 提升变量作用域：把speechRecognizer和restartTimeout放在函数外部，让结束按钮的事件能直接访问到它们。
• 调用正确的停止方法：使用webkitSpeechRecognition内置的speechRecognizer.stop()方法来终止识别，替代你原来错误的stop.startConverting()写法。
• 清除自动重启定时器：原来的setTimeout会在600ms后重新触发开始按钮，必须用clearTimeout清除这个定时器，否则识别会自动重启。
• 重置变量：停止后把实例和定时器ID重置为null，避免后续出现重复操作的错误。

这样修改后，点击结束按钮就能完全停止语音识别，也不会出现自动重启的问题了。

内容的提问来源于stack exchange，提问作者chalam