ASP.NET MVC - time ajax request

Question

Hi,

I'm using a jQuery modal dialog to display a 'Please Wait' type message to a user when a ajax call is made back to the server.

I'm doing this by making the dialog visible using the jQuery ajaxSend method. And I close the dialog using the jQuery ajaxComplete method.

All fairly routine stuff I'm sure.

However if the call takes a very short about of time (say 10 milliseconds) then I want wait until a second has passed since making the dialog visible before I then close the dialog. The reason is to provide user feedback ... and to stop the horrible flicker of the dialog quickly opening and then closing.

How can I achieve this using jQuery and / or ajax?

Many thanks for any pointers.

Answer 1

Would a better paradigm be to actually wait for a period of time before showing the dialog? If you have a responsive app then it would make sense to only show the modal if the response does not come back within say 100ms. This would avoid delaying the UI just to avoid flicker which is what you are proposing.

Note I am using beforesend and success here to dummy up the code

  var timerid;

  beforeSend: function(){

       //open the dialog in 100 milliseconds
       timerid = window.setTimeout( function(){

            $('#dialog').dialog('close');

       }, 100)

    },
  success: function(){

      //cancel the showing of the dialog if not already called
      window.clearTimeout( timerid );
      //close the dialog regardless
      $('#dialog').dialog('close');
  }

If you dont like this idea then simplay put the dialog close function inside a setTimeout within the ajax complete callback e.g

complete : function(){

   //close the dialog in 1 second
   window.setTimeout( function(){

        $('#dialog').dialog('close');

   }, 1000)

}

Answer 2

I've pulled together a solution for this myself - based on the great response from 'redsquare' and some further reading.

I have used the code from redsqure to open the modal dialog only after a given duration has passed - thus hopefully not having to open the modal at all.

For when the modal has opened I've added code to ensure it remains open for a minimum of 800 milliseconds ... just to avoid the possibility of it quickly flashing up on the screen. To achieve this I start a javascript timer in the 'ajaxSend' method and then I use the 'ajaxComplete' method to determine whether the modal is open. If so I use the timer to calculate how long it has been open for and make up the difference to 800 milliseconds. I adapted a script I found on line for my timer. Script below.

var timer_ms = 0;
var timer_state = 0;

/// <summary>
/// Responsible for starting / stopping the timer. Also calculates time.
/// </summary>
function timerStartStop() {
    if (timer_state == 0) {
        timer_ms = 0;
        timer_state = 1;
        then = new Date();
        then.setTime(then.getTime() - timer_ms);
    }
    else {
        timer_state = 0;
        now = new Date();
        timer_ms = now.getTime() - then.getTime();
    }
}

/// <summary>
/// Resets the timer.
/// </summary>
function timerReset() {
    timer_state = 0;
    timer_ms = 0;
}

Thanks. Thanks.