Set a delay in ajax call

Question

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

Answer 1

setTimeout should be used inside success function.

$(function() {
  var delay = 2000;
  var res = {
    loader: $("
", {
      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"));
}