如果已经运行 JS，如何防止点击 HTML 按钮

Question

我想知道如果按钮执行的功能是运行，我如何才能停止单击按钮。这是我的 JS 代码：

let money = 0;
let running = false;

function start(time, val) {
  if (running == false) {
    running = true;
    console.log(running)
    let bar = document.getElementById('progressBar1');
    bar.value = time;
    time++;
    let sim = setTimeout("start(" + time + ")", 30);
    if (time == 100) {
      bar.value = 0;
      let id = val;
      money++;
      document.getElementById("moneyValue").innerHTML = money;
      clearTimeout(sim);
      running = false;
    }
  } else if (running == true) {
      console.log("Already Growing!");
  };
}

<progress id="progressBar1" value="0" max="100" style="width:150px;"></progress>
<button id="restart-button" class="plantBtn" onclick="start(0, this.id)">Plant Seed</button>

它的作用是启动一个进度条（progress div）。我想让按钮提醒一条消息说已经开始或类似的东西。

我遇到的问题是它跳转到了 else if 语句，而不是运行任何东西。奇怪的是，如果我在 if 语句的中间添加一个 console.log 它会起作用。

我认为是因为bar需要时间来填充，如果用户点击它永远不会填满，因为它会跳转到else if语句并取消if函数。（只有在bar达到100%后才会再次变为false）

有人能帮忙吗？我对 JS 或 Jquery 持开放态度（那个有点生疏）。

谢谢

Answer 1

您需要阻止按钮点击，而不是您需要通过计时器调用它的实际 start 函数。所以把这些功能分开比较好：

let money = 0;
let running = false;

// when clicking the button
function onClickButton(time, val) {
  if(running) {
    console.log("Already Growing!");
  } else {
    running = true;
    start(time, val);
  }
}

// timer function
function start(time, val) {
  let bar = document.getElementById('progressBar1');
  bar.value = time;
  time++;
  let sim = setTimeout(() => start(time), 30);
  if (time == 100) {
    bar.value = 0;
    let id = val;
    money++;
    document.getElementById("moneyValue").innerHTML = money;
    clearTimeout(sim);
    running = false;
  }
}

#moneyValue::before {
  content: 'Money: ';
}

<div id="moneyValue">0</div>
<progress id="progressBar1" value="0" max="100" style="width:150px;"></progress>
<button id="restart-button" class="plantBtn" onclick="onClickButton(0, this.id)">Plant Seed</button>

Answer 2

将逻辑分解为另一个执行更新的函数。在一种方法上启动它的按钮和在另一种方法中更新 UI 的逻辑。

let money = 0;
let running = false;

function start(time, val) {
  if (running == false) {
    running = true;
    console.log(running)
    runIt(time, val);
  } else if (running == true) {
    console.log("Already Growing!");
  };
}

function runIt(time, val) {
  let bar = document.getElementById('progressBar1');
  bar.value = time;
  time++;
  let sim = setTimeout(function () {runIt(time); }, 30);
  if (time == 100) {
    bar.value = 0;
    let id = val;
    money++;
    document.getElementById("moneyValue").innerHTML = money;
    running = false;
  }
}

<progress id="progressBar1" value="0" max="100" style="width:150px;"></progress>
<button id="restart-button" class="plantBtn" onclick="start(0, this.id)">Plant Seed</button>

<div id="moneyValue"></div>

Answer 3

您可以添加一个附加参数，告诉函数调用来自循环，并且不需要检查它是否已经运行。

let money = 0;
let running = false;

function start(time, val, isFromTimer) {
  if (running == false || isFromTimer == true) { // add check
    running = true;
    console.log(running)
    let bar = document.getElementById('progressBar1');
    bar.value = time;
    time++;
    let sim = setTimeout(() => start(time, val, true), 30); // tell function it's from the timer
    if (time >= 100) { // use more than or equal to instead
      bar.value = 0;
      let id = val;
      money++;
      //document.getElementById("moneyValue").innerHTML = money;
      clearTimeout(sim);
      running = false;
    }
  } else if (running == true) {
      console.log("Already Growing!");
  };
}

<progress id="progressBar1" value="0" max="100" style="width:150px;"></progress>
<button id="restart-button" class="plantBtn" onclick="start(0, this.id)">Plant Seed</button>

Answer 4

你为什么不在你的函数被点击后使用一些 CSS 操作？

document.getElementById('restart-button').disabled = true;

然后在你的函数结束时：

document.getElementById('restart-button').disabled = false;

如果已经运行 JS，如何防止点击 HTML 按钮

How to prevent HTML button from clicking if already running JS

html

javascript

boolean

button

progress-bar

如果已经 运行 JS，如何防止点击 HTML 按钮

How to prevent HTML button from clicking if already running JS

html

javascript

boolean

button

progress-bar

如果已经运行 JS，如何防止点击 HTML 按钮