首页 > 解决方案 > 如何修复 clearInterval() 不停止间隔?

问题描述

我制作了一个连接到一个按钮的间隔,该按钮仅在你有一定数量的钱和柠檬水时才会运行。然后我创建了一个 if 语句,这样当你用完柠檬水时,间隔就会停止。我使用了 clearInterval() 并且由于某种原因间隔没有停止,柠檬水的数量变成了负数。显然你不能有负数的东西!

我已经查看了与我有类似问题的所有其他问题,但他们并没有真正回答我的问题。它们都有不同的变量,很难找到与我的代码相关的答案。

这是我的代码:

let autoBtnTwo = document.getElementById("autoBtnTwo");
let lemonade = 0;
let btnTwo = document.getElementById("btnTwo")

function btnTwoCost() {
  wallet.removeCash(20);
  update();
  document.getElementById("lemonade").innerHTML = lemonade += 30
}

function double() {
  if (wallet.getCash() >= 50) {
    wallet.addCash(2)
    update();

    document.getElementById("lemonade").innerHTML = lemonade -= 1;
  }
}

function autoLemonade() {
  if (wallet.getCash() >= 3000) {
    wallet.removeCash(3000);
    var myint = setInterval(double, 1000);
    autoBtnTwo.disabled = false;
    update();
  }
  if (wallet.getCash() <= 2999) {
    autoBtnTwo.disabled = true;
  }
  if (lemonade <= 0) {
    autoBtnTwo.disabled = true;
    btnTwo.disabled = true;
  }
}

function stopInterval() {
  var myint = setInterval(double, 1000);
  if (lemonade <= 0) {
    clearInterval(myint);
    stopInterval();
  }
}

function thousand() {
  wallet.addCash(1000)
  update();
  if (wallet.getCash() >= 3000) {
    autoBtnTwo.disabled = false;
  }
}

function Wallet() {
  return {
    addCash: function(val) {
      number += val;
    },
    getCash: function() {
      return number;
    },
    removeCash: function(val) {
      number -= val;
    }
  }
}

var number = 0;
const wallet = new Wallet();

var SUFFIXES = 'KMBTqQsSOND';

function update() {
  document.getElementById('number').textContent = getSuffixedNumber(wallet.getCash());
}

function getSuffixedNumber(num) {
  var power = Math.floor(Math.log10(num));
  var index = Math.floor(power / 3)
  num = num / Math.pow(10, (index * 3)); // first 3 digits of the number
  return num.toFixed(1) + (SUFFIXES[index - 1] || ''); // default to no suffix if it gets an out of bounds index
}
<button onclick="autoLemonade()" class="chocolate-bar-auto" id="autoBtnTwo" disabled>
  Hire worker: <br> -$3000<br> Sells Lemonade
</button>

<button onclick="thousand()">to get to $3000 for testing </button>
<button onclick="btnTwoCost()"> buy lemonade -$20</button>
<button onclick="double()">sell lemonade </button>
<div class="cash-div">
  Cash: <div id="number">0</div>
</div>

<div class="lemonade-div">
  Lemonade: <div id="lemonade">0</div>
</div>

如果这个版本有问题,请见谅。我用来防止故障的所有代码都使代码更长,它已经足够长了。按 3,000 美元按钮 4 次,然后按购买柠檬水,然后按雇用工人按钮,您将看到一旦它变为 0 会发生什么。

间隔应该停止加钱,当柠檬水达到0时停止减少柠檬水的量,而是继续进入负数。

标签: javascripthtmlintervals

解决方案


推荐阅读