Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set a delay in ajax call

I am trying to add a small delay (2 sec) between the loader icon and the success with the data as html.

What I have tried to use is the setTimeout and put in a delay number. This is not working, so I was hoping you could show me what the correct way is.

My ajax code:

<script type="text/javascript">

$(function () {

    var delay = 2000;

    var res = {
        loader: $("<div />", { class: "loader" })
    };

    $('#search').on('click', function () {
        $.ajax({
            type: 'GET',
            url: "@Url.Action("Find", "Hotel")",
            datatype: "html",
            beforeSend: function () {
                $("#group-panel-ajax").append(res.loader);
                setTimeout(delay);
            },

            success: function (data) {
                $("#group-panel-ajax").find(res.loader).remove();
                $('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
            }
        });
        return false;
    });
});

</script>

Right now it runs really fast. Hope someone can help.

like image 709
Mikkel Avatar asked Oct 28 '15 15:10

Mikkel


People also ask

How to add delay in Ajax call?

In responsive interface, the programmer needs to delay the ajax request to achieve some task before the response. This can be achieved by using jQuery setTimeout() function. This function executes the given Ajax code after some amount of given time.

How do you call Ajax every 5 seconds?

Creating a function that calls the AJAX request and using this function in setInterval() and set Interval for 5 sec. Now the function executes every 5 seconds and fetches new data from the server. It repeatedly executes the function even when the previous AJAX request is not successfully executed and return.

What is the default timeout for Ajax?

Sometimes an underlying performance problem will prevent the AJAX calls that JIRA uses from completing within the normal timeout of 30 seconds.

What is Ajax synchronous call?

AJAX: Synchronous or Asynchronous Synchronously, in which the script stops and waits for the server to send back a reply before continuing. Asynchronously, in which the script allows the page to continue to be processed and handles the reply if and when it arrives.


2 Answers

setTimeout should be used inside success function.

$(function() {
  var delay = 2000;
  var res = {
    loader: $("<div />", {
      class: "loader"
    })
  };
  $('#search').on('click', function() {
    $.ajax({
      type: 'GET',
      url: "@Url.Action("Find", "Hotel")",
      datatype: "html",
      beforeSend: function() {
        $("#group-panel-ajax").append(res.loader);
      },
      success: function(data) {
        setTimeout(function() {
          delaySuccess(data);
        }, delay);
      }
    });
    return false;
  });
});

function delaySuccess(data) {
  $("#group-panel-ajax").find(res.loader).remove();
  $('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
like image 183
Kishore Sahasranaman Avatar answered Sep 21 '22 17:09

Kishore Sahasranaman


here is something i found when i wanted to do the same :

function doStuff()
{
  //do some things
  setTimeout(continueExecution, 10000) //wait ten seconds before continuing
}

function continueExecution()
{
   //finish doing things after the pause
}

hope it will help ya

like image 25
Hadrien Delphin Avatar answered Sep 20 '22 17:09

Hadrien Delphin