在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

應該在success function內使用setTimeout 。

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

Answer 2

這是我想要做同樣的事情：

function doStuff()
{
  //do some things
  setTimeout(continueExecution, 10000) //wait ten seconds before continuing
}

function continueExecution()
{
   //finish doing things after the pause
}

希望它能幫助你

Answer 3

像這樣使用setTimeout() ：

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

Answer 4

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