使用嵌套的 if 语句，我如何退出最高级别的 if？

Question

我正在尝试使用 HTML5 语音识别 API 来记录我在屏幕上所说的话。我有一个必须先说出的关键字才能识别其他单词，所以它的工作原理有点像 Apple 的 Siri。当你说“好的，谷歌”时，它会再听两个词，当它听到它们时，它会在屏幕上打印出来。代码的工作方式是这样的：

• 收听“好的，Google”
• 记录你听过的，打开新功能找生词
• 如果您听到“15”或“30”，请将它们打印到屏幕上
• 当您听到“Finished”一词时，退出函数和两个 if 语句。

在我只能退出第一个函数的那一刻，我不能同时退出两个 if 语句。当您说“完成”这个词时，您仍然可以说“15”或“30”并将它们打印到屏幕上，但我不希望您在说“完成”后能够将这两个数字打印到屏幕上.我希望你必须再次说“Okay，Google”，然后你才能说出这两个数字。

这是代码，希望有人能提供帮助。 提前致谢。

recognition.onresult = function(event){
  var resultsLength = event.results.length -1 ;
  var ArrayLength = event.results[resultsLength].length -1;
  var Word = event.results[resultsLength][ArrayLength].transcript;
  console.log(Word);
  if (Word.indexOf('okay', 'google') != -1) {
    test.style.borderColor = "white";
    recognition.onresult = function(event){
      var resultsLength = event.results.length -1 ;
      var ArrayLength = event.results[resultsLength].length -1;
      var Word = event.results[resultsLength][ArrayLength].transcript;
      console.log(Word);
      document.getElementById('test').value = Word;
      if (Word.indexOf('15') != -1) {
        test.innerHTML = '15';
      }
      if (Word.indexOf('30') != -1) {
        test.innerHTML = '30';
      }
      if (Word.indexOf('finished') != -1) {
        test.style.borderColor = "black";
        return;
      }
    }
  }
}

Answer 1

在您发布的代码的第 8 行，您将处理函数分配给识别.onresult：

recognition.onresult = function(event){
   // content removed
}

问题在于，当您听到“完成”这个词时，您根本没有删除或替换此处理程序。下次触发事件时，完全相同的处理程序会再次启动并打印单词。

您需要做的是，当您听到“完成”这个词时，将 onresult 处理程序设置为其他内容：

if (Word.indexOf('finished') != -1) {
    recognition.onresult = function(event){
        // do something different now that we've heard "Finished"
    }
    test.style.borderColor = "black";
    return;
}

请注意，根据您的描述，您想要的是将初始函数（您在第 1 行中分配的整个代码）再次重新分配回处理程序。这开始变得非常复杂和困难，因为您现在正在处理两个匿名函数，一个嵌套在另一个函数中，并且您希望从内部函数中分配外部函数。

在这种情况下，如果您将这些匿名函数拆分出来并给它们命名，以便您可以反复将它们分配/重新分配给recognition.onresult，您的代码将更容易阅读。

这绝不是一个完整的实现，我还没有测试以下内容，但看看以下内容是否有意义：

recognition.onresult = listenForOkayGoogle;

function listenForOkayGoogle(event) {
   var Word = ...;
   if (Word.indexOf('okay', 'google') != -1) {
      recognition.onresult = listenForNumbersUntilFinished;
   }
}

function listenForNumbersUntilFinished(event) {
   var Word = ...;
   if (Word.indexOf('15') != -1) {
      // print it
   }
   if (Word.indexOf('30') != -1) {
      // print it
   }
   if (Word.indexOf('finished') != -1) {
      recognition.onresult = listenForOkayGoogle;
   }
}

您首先将 listenForOkayGoogle 指定为您的处理程序。每当事件被触发时，这个处理程序就会启动并检查是否已经说出了其中一个魔法词，如果是，它用listenForNumbersUntilFinished替换处理程序。现在，每次触发事件时，该处理程序都会启动。如果单词与相关数字之一匹配，则打印它；如果相反，它与“完成”一词匹配，则再次分配 listenForOkayGoogle 处理程序。您在此处使用Strategy Pattern 生效。

Answer 2

在嵌套的 'if' 执行之前，'top-level if' 已经完成。为了解决您的问题，您不应在收到“okay google”时设置新的事件处理程序。相反，您应该实现某种状态机。例如：

function setup(recognition) {
    var isListeningOkayGoogle = true;
    recognition.onresult = function(event) {
        var resultsLength = event.results.length -1 ;
        var ArrayLength = event.results[resultsLength].length -1;
        var Word = event.results[resultsLength][ArrayLength].transcript;
        console.log(Word);

        if (isListeningOkayGoogle) {
            if (Word.indexOf('okay', 'google') != -1) {
                test.style.borderColor = "white";
                isListeningOkayGoogle = false;
            }
        } else {
            document.getElementById('test').value = Word;
            if (Word.indexOf('15') != -1) {
                test.innerHTML = '15';
            }
            if (Word.indexOf('30') != -1) {
                test.innerHTML = '30';
            }
            if (Word.indexOf('finished') != -1) {
                test.style.borderColor = "black";
                isListeningOkayGoogle = true; // start listening 'Okay Google' again
            }
        }
    }
}