Having trouble hiding/disabling elements when using timeouts

I'm trying to disable a button, hide a select list & show some text once a button is clicked... because of how long the javascript can take I am using timeouts to prevent the browser locking & the browser ending it prematurely or presenting a warning... however the code I have doesn't seem to be hiding/disabling/showing the elements once the button is clicked.

Edit: I have confirmed that the elements ARE getting hidden & then reshown, however they are being reshown too early.... the javascript hasn't finished doing what it's doing & they are reshown almost instantly after they are hidden.

Edit 2: Fixed it by moving the code that reshows the select list etc from the "addCatsSICMain" function to the "addCatsSIC" function as so..

if (spot < cats.options.length) {    
    other code here...
} else {
    reshow select list etc code here
}

Here is the code:

This first function is the one that is called once the button is clicked.

function addCatsSICMain() {

    // Set elements
    var addBtn = document.getElementById('add');
    var cat_sel = document.getElementById('cat_sic_sel_wrapper');
    var addWait = document.getElementById('addWait');

    // Disable add button
    addBtn.disabled = true;

    // Hide selected list
    cat_sel.style.display = 'none';

    // Show waiting text
    addWait.style.display = 'block';

    // Use a timeout function so button can be hid/show when we want successfully & not on function completion

    setTimeout(function(){

        // Add selected cats
        addCatsSIC(0);

        // Reshow selected list, reenable add button & hide wwaiting text
        addWait.style.display = 'none';
        cat_sel.style.display = 'block';
        addBtn.disabled = false;

    }, 10);

}

function addCatsSIC(spot) {

    // Set the search results box
    var cats = document.getElementById('cat_sic_list');

    // Set the selected categories list that we are adding to..
    var sel_cats = document.getElementById('cat_sic_sel'); 

    // Set selcted counter var
    var sel_count = 0;

    // Set category add failed var
    var failed = 0;

    // Set batch size for looping
    var batchSize = 50;    

    // Still more to do?

    if (spot < cats.options.length) {    

        // Loop through categories from the search results select box

        for (var i = spot; i < spot + batchSize && i < cats.options.length; i++) {

            // Check if the cat is selected

            if (cats.options[i].selected == true) {

                // Set this category's values to some variables
                var cat_id = cats.options[i].getAttribute('value');
                var cat_name = cats.options[i].text;     

                if (checkCatSICAdd(cat_id) === false) {           

                    // Now we create the new element
                    var new_option = document.createElement('option');

                    // Add attribute
                    new_option.setAttribute('value',cat_id);

                    // Create text node
                    var new_text_node = document.createTextNode(cat_name);

                    // Append new text node to new option element we created
                    new_option.appendChild(new_text_node);

                    开发者_StackOverflow社区// Append new option tag to select list
                    sel_cats.appendChild(new_option);

                } else {
                    failed++;
                }

            }

        }

        var nextBitOfWork = function() { addCatsSIC(spot + batchSize) };

        // Hand control back to the browser so it can update the page & not timeout & then restart the function
        setTimeout(nextBitOfWork, 50);

    }

    if (failed > 0) {

        // Find out if more than 2 cats were selected

        for (var i = 0; i < cats.options.length; i++) {
            if (cats.options[i].selected == true) {
                sel_count++;   
            }
            if (sel_count == 2) {
                break;
            }
        }        

        // Give them an alert they have added that category already
        /*addedCatSICAlert(sel_count);*/

    }

}

Any reason why you are not using jQuery for this. You can disable button, hide select box and show elements by doing the following

$('button').click(function() {
    $(this).attr('disabled', 'disabled');
    $('select').hide();
    $('p').show();
})

check working example at http://jsfiddle.net/N697c/1/

Fixed it by moving the code that reshows the select list etc from the "addCatsSICMain" function to the "addCatsSIC" function as so..

if (spot < cats.options.length) {    
    other code here...
} else {
    reshow select list etc code here...
}