Getting a JavaScript command to run before the function has completed?

I'm trying to hide a button when a function starts & show some text & then hide the text & reshow the button when the function completes.

I am having a hard time doing this because of the way JavaScript works in that it doesn't output anything to the screen until the whole function has been completed; hence what I'm trying to do isn't working.

I tried using two different functions on the "onclick" command but this produced the same result.

Can anyone that has more knowl开发者_如何学Pythonedge with JavaScript please tell me how I can achieve what I am trying to do here?

Edit: tried the below suggested code:

function addCatsSIC2() {

    var addBtnWrapper = document.getElementById('addBtnWrapper');
    var addWait = document.getElementById('addWait');    

    addBtnWrapper.style.display = 'none';
    addWait.style.display = 'block';    

    setTimeout(function(){
        addCatsSIC();
    }, 10);

    addWait.style.display = 'none';
    addBtnWrapper.style.display = 'block';    

}

Didn't work. Only difference was that the button I clicked didn't "stay pressed down" until the function completed.

Try this

// disable the button
setTimeout(function(){
   // do your actions
   // re-enable the button
}, 10);

That ought to give the action a chance to complete, the DOM action will take effect, then timeout function will execute. JS doesn't have threads but this might achieve a similar effect.

Consider using setTimout(func, 10) to run main portion of the function - this way UI update will happen before main code runs.

You have to add the lines that change the UI to the timer function:

window.setTimeout(function(){
   addCatsSIC();
   addWait.style.display = 'none';
   addBtnWrapper.style.display = 'block';
}, 10);

Otherwise it will get executed before your addCatsSIC function.