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 （）;

等等。