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.

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.

• javascript
• jquery
• ajax
• delay
• settimeout

• 2 That's not how setTimeout works. Have you read the documentation on it? – j08691 Commented Oct 28, 2015 at 15:26
• Where have you seen setTimeout being used as setTimeout(delay)? I would find a better source / tutorial / documentation. – Felix Kling Commented Oct 28, 2015 at 15:27
• What are you actually trying to delay? Do you want a delay before sending the request? Or do you want a delay after receiving the response and before displaying the results? – Lee Jenkins Commented Oct 28, 2015 at 15:31
• at least give him some time to check how the setTimeout() works before answering the question – Mi-Creativity Commented Oct 28, 2015 at 15:36

3 Answers 3

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>

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

Use setTimeout() like this:

<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);

            },

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

            }
        });
        return false;
    });
});

</script>