title: Set a delay in ajax call
body: <p>I am trying to add a small delay (2 sec) between the loader icon and the success with the data as html.</p>
  
  <p>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.</p>
  
  <p><strong>My ajax code:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(function () {
  
      var delay = 2000;
  
      var res = {
          loader: $("&lt;div /&gt;", { 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;
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Right now it runs really fast. Hope someone can help.</p>