如何在JavaScript中实现点击按钮后停止指定function运行

DOM元素的onclick属性存储的是绑定的点击事件处理函数，而非「按钮是否被点击过」的布尔状态。未绑定点击事件时该属性值为null，绑定后的值是函数对象，无论哪种情况和true做相等判断的结果都为false，所以你的判断逻辑永远不会触发。

核心思路是通过自定义状态变量控制目标函数是否执行，实现步骤如下：

• 新增一个全局状态变量，标记是否需要停止appear函数运行
• 点击按钮时修改这个状态变量的取值
• 在appear函数开头判断状态，符合停止条件就直接return终止函数运行

修改后的完整代码如下：

JavaScript代码 #

let textarea = document.getElementsByTagName('textarea')[0]
let message = document.getElementById('message')
// 新增状态控制变量，默认值为false，即不停止appear运行
let isAppearStopped = false

function clicks() {
  console.log('hi')
  // 点击按钮后将状态改为停止
  isAppearStopped = true
}

function appear() {
  // 先判断状态，需要停止就直接退出函数，后续逻辑不会执行
  if (isAppearStopped) {
    message.style.display = 'none'
    console.log('it works')
    return
  }
  // 正常执行业务逻辑
  message.style.display = 'revert'
  textarea.value = textarea.value.trimStart();
};

HTML代码 #

（和你原有代码一致，无需修改）

<textarea></textarea>
<div id="message">.....</div>
<button onclick="clicks()">split(20px)</button>

如果你的appear函数是通过setInterval定时触发的，也可以直接在按钮点击时清除定时器，更彻底地停止函数运行，示例如下：

// 假设你是通过定时器定时调用appear
const appearTimer = setInterval(appear, 100)

function clicks() {
  // 清除定时器后，appear就不会再被触发执行
  clearInterval(appearTimer)
  message.style.display = 'none'
  console.log('it works')
}

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