Necesito un retraso de 5 segundos antes de configurar HTML de éxito en el div. Lo he intentado a continuación pero no funciona. ¿Alguien tiene ideas?

$("#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);
});

Entonces el código a continuación ahora funciona. El problema ahora identifica que el intervalo original dentro del botón no se restaura.

$("#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 () {

        }
    });
});
0
sanjay 30 ago. 2014 a las 15:45

2 respuestas

La mejor respuesta
$("#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 () {
        }
    });

});
0
worldask 30 ago. 2014 a las 12:20

Creo que el caso es ajax, que está ejecutando la función success, no tiene callAjax en su contexto, por lo tanto, callAjax se exalta a undefined.

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

Puede verificar fácilmente las cosas iniciando sesión en el valor de la consola de callAjax desde la devolución de llamada de ajax.

La solución es preservar la función callAjax dentro del contexto, así:

//in ajax call's properties object
success: (function(callAjax) { return function (response) {
    $("#_DailyViewResults").html(response);
    $("#_DailyViewResults").show();
    setTimeout(callAjax, 5000);
}})(callAjax),
error: //...
0
test30 30 ago. 2014 a las 12:06