Javascript备用功能在onclick上运行

Question

因此，我具有语音输入文本功能，该功能是在按下麦克风图标时触发的。 该功能有效。 我的问题是我希望同一图标执行2项操作。 第一次单击它将开始听到声音。 第二次单击将停止听到声音。 我基本上希望功能onclick在两个功能之间交替，即开始和停止。 我该怎么做？

以下是我目前得到的。 那仅对开始录制有效。如何将recognition.stop()放入同一单击函数？

$('#micButton').on('click', function () {
    recognition.start(); //this is to start recording
});

在此之下，我认为可以在开始和停止之间进行切换（不起作用）。

$('#micButton').on('click',
    function () {
        recognition.start();
    },
    function () {
        recognition.stop();
    }
);

总而言之，如何让我的onclick在开始和停止之间切换？

Answer 1

您将需要某种标记来检查当前是否正在收听语音：

let currentlyListening = false;
$('#micButton').on('click', function () {
  if (!currentlyListening) {
    recognition.start(); //this is to start recording
  } else {
    recognition.stop();
  }
  currentlyListening = !currentlyListening;
});

如果recognition还没有做到，最好也向用户提供当前状态的指示符，例如，更改或添加在currentlyListening为true时显示红点的图像。

Answer 2

可以设置数据标签或类来确定是否正在使用它。

// SEEING AS YOU'RE USING JQUERY
$('#micButton').on('click', function () {
    if($(this).data('active') == false) {
        recognition.start();
        $(this).data('active', true);
    } else {
        recognition.stop();
        $(this).data('active', false);
    }
}

Answer 3

也可以使用三元运算符！）

$('#micButton').on('click', function () {
  recognition[ this.listening ? "stop" : "start" ]();

  this.listening = !this.listening;
});

与@CertainPerformance答案几乎相同，但是将true / false标志存储在单击的元素对象中。

第一次单击： this.listening == undefined (false) ，→ognition.start（）;

第二次单击： this.listening == true ，→识别this.listening == true （）;

等等。