Pause before JQuery AJAX post

Question

Because the page I am working on is an intranet page, my AJAX call is very quick along with the response. For usability purposes I'd like a short 1-2 sec pause to display a loading animation. Below is what I have tried but the animation is barely visible.

$(document).ready(function(){ 
    $('#wait').hide();
    $('#submitform').click(function(){
    $('#wait').show();
    $.ajax({
        type: "POST",
        url: "abs_newabs_check.asp",
        data: { StaffID: $("#suggest1").val() },
        success: callback
    });

});
});

function callback(data, status)
{
    $('#wait').hide();
    $("#ajaxdiv").html(data);
}

"I want to make my application slower", what an interesting idea :-) — naivists, Jan 15 '10 at 09:44

score 5 · Answer 1 · edited May 23 '17 at 10:32

5

I would have to suggesting thinking about a different way to add usability you are now slowing down your service to help users. What about using the Yellow Fade Technique That way you can show something has changed on the page and you are not slowing down your system.

Here is a related question that may help. Yellow fade Effect with JQuery

edited May 23 '17 at 10:32

Community

1
1

answered Jan 15 '10 at 08:49

Jeff Beck

3,944
3
28
45

Thanks for that. I have implemented that along with my loading animation. – tonyyeb Jan 15 '10 at 11:40

score 3 · Accepted Answer · answered Jan 15 '10 at 08:44

Add a setTimeout call to the callback function:

function callback(data,status) {
  setTimeout(function() {
    $("#wait").hide();
    $("#ajaxdiv").html(data);
  }, 1500);
}

nb. the data parameter will be passed into the anonymous function as a closure, if I'm not mistaken

score 1 · Answer 3 · answered Jan 15 '10 at 08:47

1

Use setTimeout function

setTimeout("alert('5 seconds has passed.');",5000);

answered Jan 15 '10 at 08:47

yojimbo87

65,684
25
123
131

Pause before JQuery AJAX post

3 Answers3

Linked