Question

我有一个计时器按钮，它显示start和stop。当我单击它时，文本更改为stop，而当我再次单击它时，文本更改为start。为了保持状态，然后我编写了如下代码：

start.onclick = function() {
    if (state == 0) {
        state = 1;
        timer();
    }
    if (state == 1) {
        state = 0;
        clearTimeout(t);
    }
}

状态的前提是0。在正常情况下，如果状态等于0，它将起作用，然后状态将变为1，并且将执行timer（）。如果状态等于1，则状态将更改为0，并执行clearTimeout（）。但是我不知道为什么它无法在javascript中这样工作。然后我更改代码，如下所示：

start.onclick = function() {
    if (state == 0) {
        timer();
    }
    if (state == 1) {
        state = 0;
        clearTimeout(t);
    }
    state = 1;
}

然后它工作了，执行了timer（）并将状态更改为1，但是当我再次尝试启动按钮时，则没有任何效果。我检查状态，然后状态为1.，因为没有执行第二个条件。有人知道这段代码有什么问题吗？我想念什么？

Answer 1

您的代码将state设置为1（如果为0）。

这使第二if中的条件成立，因此它的代码也被执行。因此，两个{if都在state为0时执行。

像使用else if

start.onclick = function () {
    if (state == 0) {
        state = 1;
        timer();
    } else if (state == 1) { <=== see the difference in this line
        state = 0;
        clearTimeout(t);
    }
}

Answer 2

我不知道您的代码如何工作，所以我做了一些猜测。

所以我认为您的代码应该是这样的：

// Start button
const start = document.getElementById('start');
// Counting text
const text = document.getElementById('text');

// State
let state = 0;
// Timer object
let t = null;

function timer() {
  // Assuming the timer calls itself like this so you can use clearTimeout to stop it
  t = setTimeout(timer, 1000);
  
  // Doing some stuff
  text.innerHTML++;
}



start.onclick = function (){
  if(state == 0) {
    // If the timer is not running, run it
    state = 1;
    timer();
    start.innerHTML = 'Stop';
  } else if (state == 1) {
    // If it's already running, stop it
    state = 0;
    clearTimeout(t);
    start.innerHTML = 'Start';
  }
}

<h3 id="text">0</h3>
<button id="start">Start</button>

javascript上的发布前条件？

2 个答案: