【问题标题】：Make a function stop working when a button is clicked(javascrpt)单击按钮时使功能停止工作（javascript）
【发布时间】：2021-08-27 09:12:23
【问题描述】：

我想让function 在 Javascript 中单击按钮时停止工作。

我尝试使用if 语句来检查按钮是否被点击。另外，我试图让函数在另一个函数中满足某个条件时停止工作。

但是，它仍然不起作用。

有谁知道如何使它工作以及为什么onclick == true 不再工作？

let textarea = document.getElementsByTagName('textarea')[0]
let message = document.getElementById('message')

function clicks() {
  console.log('hi')
  //I want to make the appear function stop working when this function is executing.
}

function appear() {
  //this is not working
  if (document.getElementsByTagName('button')[0].onclick == true) {
    message.style.display = 'none'
    console.log('it works')
  } else {
    message.style.display = 'revert'
    textarea.value = textarea.value.trimStart();
  }
};

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

【问题讨论】：

.onclick == true 没有意义。 onclick 属性保存对您指定为单击处理程序的函数对象的引用（因此，此条件将始终评估为真。）这与按钮是否被实际单击无关。只需从处理函数中切换布尔标志的值，然后您可以在下次单击时检查该标志。
appear 怎么称呼？你的问题不是很清楚。
根据 wCBroe 的评论，保存值 true 或 false 的隐藏字段可以解决问题。
@CBroe，我不太确定该怎么做。比如我做handler函数，第一次点击会变成true，第二次点击会变成false吗……

标签： javascript html function button

【解决方案1】：

onclick 是一个事件，当click 事件发生时触发。结果，onclick 不存储状态。您需要创建对clicks 和appear 函数可见的变量，并使用它来标识停止执行函数appear 的标志。

    let textarea = document.getElementsByTagName('textarea')[0];
    let message = document.getElementById("message");
    let stopButtonClicked = false;

    function clicks() {
        console.log("hi");
        stopButtonClicked = true;
    }

    function appear() {
        if (stopButtonClicked) {
            message.style.display = "none";
            console.log("it works");
        } else {
            message.style.display = "revert";
            textarea.value = textarea.value.trimStart();
        }
    }

【讨论】：

只有当 stopButtonClicked 为 true 时才会控制台。对吗？
@Shawn 此代码将被执行 message.style.display = "none"; console.log("it works");
我的意思是 message.style.display = "none"; console.log("it works") 仅在 stopButtonClicked 时有效。对吗？
@Shawn 是，但仅在调用 appear 函数时。你真的应该自己尝试这段代码。请做一些工作。
我明白了。谢谢

【解决方案2】：

您需要应用信号量逻辑，例如：

let beingClicked = false;
function clicks() {
  
  beingClicked = true;
  console.log('hi');
  //I want to make the appear function stop working when this function is executing.
  beingClicked = false;
}

function appear() {
  //this is not working
  if (beingClicked) {
    message.style.display = 'none'
    console.log('it works')
  } else {
    message.style.display = 'revert'
    textarea.value = textarea.value.trimStart();
  }
};

请注意，在 function 的开头，我们将信号量 (beingClicked) 设置为红色（在本例中为 true），在 function 的末尾，我们将其设置为 @987654326 @。

值得注意的是，还有两个问题需要考虑：

1

您可能需要将此逻辑重用于其他按钮。如果是这样，那么您可以考虑以下几点：

function ButtonSemaphore(button) {
    let semaphore = false;
    let events = [];
    button.addEventListener("click", function(evt) {
        semaphore = true;
        for (let event of events) event(evt);
        semaphore = false;
    });
    function isRed() {
        return semaphore;
    }
    function isGreen() {
        return !semaphore;
    }
    function addEvent(callback) {
        events.push(callback);
    }
}

您可以通过将其调用为let myButtonSemaphore = new ButtonSemaphore(button) 来实例化它，其中button 是一个有效按钮。每当您想向其中添加事件时，只需致电myButtonSemaphore.addEvent(function(evt) {/* Some code */})。请注意，在所有事件之前和所有事件之后都会处理事件数组并正确设置信号量。

2

您可能需要重用它，因此建议您创建一个自己的 .js 文件，这样您的代码将只存在一次，并且可以在需要时导入。

【讨论】：

@Arpad，我有点困惑，为什么你在开始时将 beingClicked 设置为 true 并在最后将其设置为 false。你能给我解释一下吗？非常感谢您回答我的问题。
@Shawn 因为如果在将其设置为 true 和将其设置为 false 之间调用appear，那么在执行appear 时，在那个阶段beingClicked 是true。如果您在单击之前或之后调用appear，则beingClicked 为假。由于我们希望appear 在这两种情况下具有不同的行为，因此将beingClicked 在被单击时设置为true 并在不再被单击时设置为false 是合适的。
@Shawn 将beingClicked 视为信号量，将您的程序视为汽车，将点击事件视为十字路口。当汽车到达十字路口时，它必须停下来，因为信号灯是红色的，一旦它等待的所有汽车（事件）都通过了，信号灯就会变成绿色，并且可以继续通行。

【解决方案3】：

let textarea = document.getElementsByTagName('textarea')[0]
let message = document.getElementById('message')

function clicks() {
  console.log('hi')
  //I want to make the appear function stop working when this function is executing.
}

function appear() {
  //this is not working
  if (document.getElementsByTagName('button')[0].onclick == true) {
    message.style.display = 'none'
    console.log('it works')
  } else {
    message.style.display = 'revert'
    textarea.value = textarea.value.trimStart();
  }
};

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

【讨论】：