Javascript create a timed onClick event handler that doesn’t freeze the page?

Goal: Have a button that when clicked greys out for 1 second and after the second increments a value. This should allow you to do other actions on the page while waiting.

Issue: When I click the button the page freezes and I must wait until the wait function has completed before I can click another button. Also the button doesn’t grey out. It stops its animation and then completes it once the 1 second has passed.

HTML Code:

<button id=woodBtn class=woodBtnC type="button" onClick="getWood()">Get Wood</button> 
<table>
    <tr>
        <th>Wood</th>
    </tr>
    <tr>
        <td id=woodValue>0</td>>
    </tr>
</table>

Javascript Code:

function getWood() {
    wood++;
    greyOut("woodBtn", 1);
    document.getElementById("woodValue").innerHTML = wood;
    writeConsole("Got 1 wood!!");
}

function greyOut(id, time) {
    document.getElementById(id).style.opacity = "0.5";
    var start = Date.now();
    do{
        var now = Date.now();
        var delta = now - start;
    } while (delta < 1000);
    document.getElementById(id).style.opacity = "1.0";
}

I don’t think javascript has threading, so I how do I do this without them?

Answer

Change your greyOut code with:

function greyOut(id, time) {
    document.getElementById(id).style.opacity = "0.5";
    var start = Date.now();
    setTimeout(function(){
        document.getElementById(id).style.opacity = "1.0";
    }, 1000) // delay time ms
}

It should work