Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You are setting a <code>timeout</code> that says "after 1 second, do X".<br> Your current timeout is actually pretty hard to follow, but it broadly does this in a very tangled way:</p> <ol> <li>Make <code>counter</code> = 4</li> <li>Wait 1 second.</li> <li>If <code>counter != 1</code>, subtract 1 from the counter, disable button, and go back to <strong>2</strong>. Continue otherwise.</li> <li>Enable button.</li> </ol> <p>As you can see, you are disabling the button AFTER waiting 1 second, not immediately.</p> <p>I would suggest changing your countdown() method as follows:</p> <ol> <li>Disable button.</li> <li>Make <code>counter</code> = 3</li> <li>If <code>counter &gt; 0</code>, Print "Click again in <code>counter</code> seconds", Subtract 1 from <code>counter</code>, <em>Wait 1 second</em> and go back to <strong>2</strong>. Continue Otherwise.</li> <li>Enable button.</li> </ol> <p>That could look like this: (using your code)<br> <strong><a href="http://codepen.io/Goodwine/pen/ChFxp" rel="nofollow">--- Working Example Here!!! ---</a></strong></p> <pre><code>function countdown() { document.getElementById('btnOne').disabled = true; //3 is more understandable than 4 for your example. var countdownNum = 3; incTimer(); function incTimer() { if (countdownNum &gt; 0) { // Order of statements IS important. // Note the differences in this IF block. document.getElementById('timeLeft').innerHTML = 'Click again in ' + countdownNum; countdownNum--; setTimeout(function(){ // Note that the whole timeout was moved inside, // Imagine this is recursive function, with a delay. incTimer(); }, 1000); } else { document.getElementById('timeLeft').innerHTML = ''; document.getElementById('btnOne').disabled = false; } } } </code></pre> <p>There are better ways to express your code, but I tried to stick as much as possible to your code style.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload