设置ajax调用的延迟

Question

我试图在加载器图标和​​成功的html之间添加一个小的延迟（2秒）。

我尝试使用的是setTimeout并放入延迟号。这是行不通的，所以我希望您能告诉我正确的方法是什么。

我的ajax代码：

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

现在，它运行得非常快。希望有人能帮忙。

Answer 1

setTimeout应该用在里面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>