Ensure jquery progress dialog is shown for at least some minimum time

Question

I'm using a jquery ui dialog to let the user know that his request is in progress while the client is processing some data. However, as you all know, it takes a hell of a lot longer for ie to process than firefox. What's the best pattern for making sure that the progress dialog is displayed for at least some minimum amount of time, so it doesn't just flash in firefox, and also that, even if the timer expires, the dialog stays up until the browser finishes processing?

Answer 1

You could address it in a few ways, although they all essentially do some derivative of queuing.

For instance:

$("#startLink").click(function(){
    var $dialog = $(".dialog");
    $dialog.dialog({
        open: function(e, ui){
            // delay any close operations for at least 2 seconds
            $dialog.queue(function(){
                setTimeout(function(){
                    $dialog.dequeue();
                }, 2000);
            });
            // if you're using jQuery 1.4, you can do this instead
            // $dialog.delay(2000);
        }
    });

    // do some processing here

    $dialog.queue(function(){
        $dialog.dialog('close');
        $dialog.dequeue();
    });
});

Regardless, all you're really doing is ensuring a given delay using the built in queue system. You could accomplish it without using the queue system as well, but that's another example.