小编典典

设置ajax调用的延迟

ajax

我试图在加载器图标和​​成功的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>

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


阅读 314

收藏
2020-07-26

共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>
2020-07-26