設置Ajax調用中的延遲不起作用

Question

在將成功HTML設置為div之前，我需要5秒的延遲。 我在下面嘗試過，但是沒有用。 有人有想法嗎？

$("#glyphicon-chevron-left-daily").click(function () {
    var endDate = $("#DailyViewButtonOk1").data("date");
    var previousButtonHtml = $(this).html();
    $(this).html("<span class=\"glyphicon glyphicon-refresh\"></span>");

    $(function () {
        callAjax();
    });

    function callAjax() {
        $.ajax({
            url: loadUrl,
            type: 'POST',
            load: "<img src='img/load.gif' alt='loading...' />",
            data: { startDate: startDate, endDate: endDate },

            success: function (response) {
                $("#_DailyViewResults").html(response);
                $("#_DailyViewResults").show();
                setTimeout(callAjax, 5000);
            },
            error: function () {

            }
        });
    }
    $(this).html(previousButtonHtml);
});

因此，下面的代碼現在可以工作了。 現在的問題是按鈕內的原始跨度未恢復。

$("#glyphicon-chevron-left-daily").click(function () {
    var endDate = $("#DailyViewButtonOk1").data("date");
    var previousButtonHtml = $(this).html();
    $(this).html("<span class=\"glyphicon glyphicon-refresh\"></span>");
    $.ajax({
        url: loadUrl,
        type: 'POST',
        data: { startDate: startDate, endDate: endDate },

        success: function (response) {
            setTimeout(function (response) {
                $("#_DailyViewResults").html(response);
                $("#_DailyViewResults").show();
                $(this).html(previousButtonHtml);
            }, 1000, response);
        },
        error: function () {

        }
    });
});

Answer 1

$("#glyphicon-chevron-left-daily").click(function () {
    var endDate = $("#DailyViewButtonOk1").data("date");
    var previousButtonHtml = $(this).html();
    $(this).html("<span class=\"glyphicon glyphicon-refresh\"></span>");
    var that = this;

    $.ajax({
        url: loadUrl,
        type: 'POST',
        load: "<img src='img/load.gif' alt='loading...' />",
        data: { startDate: startDate, endDate: endDate },

        success: function (response) {
            var params = [];
            params['response'] = response;
            params['previousButtonHtml'] = previousButtonHtml;
            params['that'] = that;

            setTimeout(function(params) {
                $("#_DailyViewResults").html(params['response']);
                $("#_DailyViewResults").show();
                $(params['that']).html(params['previousButtonHtml']);
            }, 5000, params);
        },
        error: function () {
        }
    });

});

Answer 2

我認為這種情況是執行success功能的ajax，它的上下文中沒有callAjax，因此callAjax被提升為undefined 。

success: function (response) {
                    $("#_DailyViewResults").html(response);
                    $("#_DailyViewResults").show();
                    console.log('callAjax=', callAjax);
                    setTimeout(callAjax, 5000);
                },

您可以通過從ajax的回調中登錄callAjax控制台值來輕松檢查內容。

解決方案是在上下文中保留callAjax函數，如下所示：

//in ajax call's properties object
success: (function(callAjax) { return function (response) {
    $("#_DailyViewResults").html(response);
    $("#_DailyViewResults").show();
    setTimeout(callAjax, 5000);
}})(callAjax),
error: //...