1

jquery ajaxの投稿に時間がかかりすぎた後に何らかの進行状況のみを表示することは可能ですか? setTimeout を使用して進行状況インジケーターの表示を遅らせる次のコードがあります (これは基本的に有効にする Twitter ブートストラップ モーダルであり、進行状況インジケーター gif が含まれています) が、デバッグ中にブレークを配置すると機能しないように見えますサーバー側のコードをポイントすると、クライアント側のsetTimeoutでオフになるはずですが、サーバーが応答を返すまでsetTimeoutは呼び出されません(時間がかかりすぎるとプログレスバーが表示されません)。setTimeout を使用して遅延させない場合 (基本的にまったく遅延しない場合)、または進行状況インジケーターがほぼ瞬時に表示されるような短い遅延を行う場合は正常に動作しますが、1.5 秒の遅延はありません。

これが私のJavaScriptです:

var progressModalRunning = false;
var needModalProgress = true;

// document.ready events/functions to call
$(function () {
    $("form").on("submit", function (event) {
        event.preventDefault();

        var form = $(this);

        // We check if jQuery.validator exists on the form
        if (!form.valid || form.valid()) {
            toggleModalProgressAndButtons(form, true);

            $.post(form.attr('action'), form.serializeArray())
                .done(function (json) {
                    json = json || {};

                    // In case of success, we redirect to the provided URL or the same page.
                    if (json.success) {
                        location = json.redirect || location.href;
                    } else if (json.errors) {
                        displayErrors(form, json.errors);
                        toggleModalProgressAndButtons(form, false);
                    }
                })
                .error(function () {
                    displayErrors(form, ['An unknown error happened.']);
                    toggleModalProgressAndButtons(form, false);
                });
        }
    });
});

// show/hide modal progress indicator and disable/enable modal buttons
var toggleModalProgressAndButtons = function (form, toggle) {
        if (toggle) {
            showProgress();
        } else {
            hideProgress();
        }
}

// display validation errors
var displayErrors = function (form, errors) {
    needModalProgress = false;

    var errorSummary = getValidationSummaryErrors(form)
        .removeClass('validation-summary-valid')
        .addClass('validation-summary-errors');

    var items = $.map(errors, function (error) {
        return '<li>' + error + '</li>';
    }).join('');

    var ul = errorSummary
        .find('ul')
        .empty()
        .append(items);
};

// Show a progress indicator in it's own modal
var showProgress = function () {
    // we will delay it by 1.5 seconds - don't want to bother showing if the response is that     fast,
    // because it makes the screen to appear to flicker since backdrop for modal is darker
    setTimeout(function () {
        if (needModalProgress) {
            progressModalRunning = true;

            $('#progress').modal({ keyboard: false, backdrop: 'static' });
    }
    }, 1500);
}

// hide the progress indicator
var hideProgress = function () {
    if (progressModalRunning) {
        progressModalRunning = false;
        needModalProgress = true;

        $('#progress').modal('hide');
    }
}
4

0 に答える 0