原生JavaScript如何用单个切换按钮调用annyang.js的启动和停止两个函数

你之前的代码每次点击都会直接执行annyang.start()作为classList.toggle的第二个参数，所以只会触发启动逻辑。可以通过判断按钮的active类状态来区分要执行的操作，修改后的代码如下：

HTML代码（无需改动） #

<div class="action" onclick="actionToogle()">

修改后的JS代码 #

<script>
function actionToogle() {
  const actionBtn = document.querySelector(".action");
  const isRecognizing = actionBtn.classList.contains("active");

  if (isRecognizing) {
    // 当前正在识别，点击后停止
    annyang.abort();
    actionBtn.classList.remove("active");
  } else {
    // 当前未识别，点击后启动
    annyang.start();
    actionBtn.classList.add("active");
  }
}
</script>

这样每次点击都会根据当前按钮的激活状态，交替执行启动和停止识别的方法，同时同步切换按钮的active类样式。

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