How can I give control back (briefly) to the browser during intensive JavaScript processing?

Question

I have read the post here about using setTimeout() during intensive DOM processing (using JavaScript), but how can I integrate this function with the below code? The below c

Answer 1

If you need something simpler, I wrote a jQuery plugin to ease writing of asynchronous loops: jQuery Async.

Using the plugin, your code can be rewritten as:

function appendToSelect() {
    $("#mySelect").children().remove() ;
    $("#mySelect").html(
        ''
        + obj.data[0].name
        + ''
    );

    /////////////////////////////
    var i = 1;
    $.whileAsync({
        test: function(){ i < obj.data.length; }
        loop: function()
        {
            $("#mySelect").append(
                ''
                + obj.data[i].name
                + ''
            ); 
            i++;
        }
    });
    /////////////////////////////
}

Should help the responsiveness. Tweak the 'bulk' and 'delay' option for more control.