单击按钮时使功能停止工作（javascript）

Question

我想让 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>

Answer 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();
        }
    }

Answer 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我们设置为false.

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

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 文件，这样您的代码将只存在一次，并且可以在需要时导入。

Answer 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>

单击按钮时使功能停止工作（javascript）

Make a function stop working when a button is clicked(javascrpt)

html

javascript

function

button

1

2