Postpone Postback For 3 Seconds?

Question

I have a usercontrol with a couple of drop downs Lists and a button, I want the user to click the button (Which response.redirects depending on the selection in the DDL's).

Now instead of redirecting straight away, I want to display a little loading icon for 3 seconds and then redirect... Has anyone done anything like this?

Answer 1

You can perform delays with the setTimeout() function in javascript.

setTimeout(function() { alert('After 5 seconds.'); }, 5000);

Answer 2

You're probably going to need to override a couple things in your Javascript and use a "setTimeout" to delay the loading.

<script type="text/javascript" >
    var __handleSubmit = theForm.submit;
    theForm.onsubmit = function() {
        alert('loading'); //Show your message here
        window.setTimeout(function() {
            __handleSubmit();
        }, 3000);
    }
</script>

You might want to play with a bit more... this is may not work for all instances since I've never done it.

If the delay is simply for "aesthetics", to make it appear it is working, then I'd recommend against it - programmers appear to be the only people that think loading bars are cool :)

Answer 3

An artificial delay where none is needed is kinda lame. What you can do instead is on submission of your form display your throbber. I use the following on a document upload form where large media files are being posted.

<script type="text/javascript" id="PreJavaScript">
    function NUsubmit(){
     document.getElementById("uploadFormInputs").style.display = 'none';
     document.getElementById("progressBar").style.display = 'block';
     return true;
    };
    function init() { document.getElementById("UploadFormObject").onsubmit = NUsubmit; };    

    window.onload = init;
</script>

If I remember correctly, in some versions of IE the animated gif didn't play but it worked fine in IE6+ and FireFox.

This way if the postback is quick they never see the throbber but if it takes a while they see it and it gives them the sense that something is happening.

Answer 4

Looks like you should implement this page using AJAX. You can place a progress indictor on your page to alert the user that a long running process is taking place.

Answer 5

I got this working by using

System.Threading.Thread.Sleep(4000);

In the postback