Question

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 knowledge 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.

Answer 1

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.