javascript - 如何使用函数每秒增加一个变量值？

Question

我试图让变量每秒增加。我应该在 autoClicker 函数中包含什么，以便变量 clicks 每秒增加 1？另外，如果代码中还有什么问题，可以指出来吗？抱歉，如果这个问题看起来很基础，我对 JavaScript 还很陌生。

// The variable we are trying to increase
var clicks = 0;
var upgrade1 = 1;

function getClicks() {
  clicks += upgrade1;
  document.getElementById("clicks").innerHTML = clicks;
};

function buyAutoClicker() {
  if (clicks >= 50) {
    clicks -= 50
    autoClicker()
  } else {
    alert = "Sorry, you don't have enough clicks to buy this";
  }
}

// The function I will use to increase clicks
function autoClicker() {}

Answer 1

您可以创建一个具有启动、暂停、广告更新功能的 AutoClicker 类。它将负责管理 setInterval id。

编辑:我更新了它以包含升级按钮，现在可以手动单击目标。

const upgrades = [{
  cost: 50,
  rate: 2
}, {
  cost: 100,
  rate: 4
}];
  
const main = () => {
  const target = document.querySelector('.auto-clicker');
  const span = document.querySelector('.info > span');
  const btn = document.querySelector('.btn-toggle');
  const clicker = new AutoClicker(target, 1000, (clicks) => {
    span.textContent = clicks;
  }).start();

  initializeUpgrades(clicker, upgrades);

  btn.addEventListener('click', (e) => {
    e.target.textContent = clicker.isRunning() ? 'Start' : 'Pause';
    clicker.toggle();
  });
};

const initializeUpgrades = (clicker, upgrades) => {
  const upgradeContainer = document.querySelector('.upgrades');

  upgrades.forEach(upgrade => {
    const btn = document.createElement('button');
    btn.textContent = upgrade.cost;
    btn.value = upgrade.rate;
    btn.addEventListener('click', (e) => {
      let cost = parseInt(e.target.textContent, 10);
      let value = parseInt(e.target.value, 10);
      if (clicker.clicks >= cost) {
        clicker.clicks -= cost;
        clicker.step = value
      } else {
        console.log(`Cannot afford the ${value} click upgrade, it costs ${cost} clicks`);
      }
    });
    upgradeContainer.appendChild(btn);
  });
};

class AutoClicker {
  constructor(target, rate, callback) {
    if (typeof target === 'string') {
      target = document.querySelector(target);
    }
    this.target = target;
    this.rate = rate;
    this.callback = callback;
    
    this.init();
  }
  init() {
    this.step = 1;
    this.clicks = 0;
    this._loopId = null;
    
    this.target.addEventListener('click', (e) => {
      this.update();
    });
  }
  isRunning() {
    return this._loopId != null;
  }
  toggle() {
    this.isRunning() ? this.pause() : this.start();
  }
  update() {
    this.clicks += this.step;
    if (this.callback) {
      this.callback(this.clicks);
    }
  }
  start() {
    this.update(); // Update immediately
    this._loopId = setInterval(() => this.update(), this.rate);
    return this;
  }
  pause() {
    clearInterval(this._loopId);
    this._loopId = null;
    return this;
  }
}

main();

.wrapper {
  width: 10em;
  text-align: center;
  border: thin solid grey;
  padding: 0.5em;
}

.auto-clicker {
  width: 4em;
  height: 4em;
  background: #F00;
  border: none;
  border-radius: 2em;
}

.auto-clicker:focus {
  outline: none;
}

.auto-clicker:hover {
  background: #F44;
  cursor: pointer;
}

.info {
  margin: 1em 0;
}

.upgrades {
  display: inline-block;
}

.upgrades button {
  margin-right: 0.25em;
}

<div class="wrapper">
  <button class="auto-clicker"></button>
  <div class="info">Clicks: <span class="clicks"></span></div>
  <button class="btn-toggle">Pause</button>
  <div class="upgrades"></div>
</div>