如何等待函数执行完毕后，才能再次点击按钮触发该函数？

要实现这个需求，我们可以通过添加执行状态标记变量来控制按钮的触发逻辑：当函数正在执行时，拒绝新的点击请求；函数执行完成后，恢复可点击状态。以下是基于你提供的代码修改后的完整实现：

完整代码 #

HTML #

<h2>JavaScript addEventListener()</h2>

<button id="myBtn">Click Me</button>

<div id="myContainer">
  <div id="myAnimation"></div>
</div>

CSS #

#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

JavaScript #

document.getElementById("myBtn").addEventListener("click", myFunction);

setTimeout(function() {
  myFunction();
}, 3000);

var id = null;
// 新增状态标记：标记当前是否正在执行动画
var isAnimating = false;

function myFunction() {
  // 如果正在执行动画，直接返回，不触发新的执行
  if (isAnimating) return;
  
  var elem = document.getElementById("myAnimation");
  var pos = 0;
  clearInterval(id);
  // 开始动画前标记为正在执行
  isAnimating = true;
  id = setInterval(frame, 10);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      // 动画执行完毕，恢复可点击状态
      isAnimating = false;
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}

关键改动说明 #

• 添加isAnimating变量作为执行状态标记，初始值为false（表示按钮可点击）。
• 在myFunction开头增加判断逻辑：如果isAnimating为true（当前正在执行动画），直接返回，不执行后续代码。
• 动画开始执行前，将isAnimating设为true，锁定按钮触发权限。
• 当动画完成（pos == 350）时，清除定时器并将isAnimating设为false，解锁按钮，允许再次点击触发。
• 自动触发的setTimeout逻辑也会遵循同样的状态控制，避免动画冲突。

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