Как мне обновить пользовательский интерфейс в IE 8, поскольку строки JavaScript выполняются в функции, а не в конце функции?

Question

Я пытаюсь отобразить индикатор выполнения, пока вызовы ajax заполняют форму.У меня есть функция с именем LOADFORM ().Он запускает диалоговое окно jquery, отображает индикатор выполнения, вызывает несколько других не асинхронных вызовов ajax для получения данных.После завершения каждого вызова данных он перемещает индикатор выполнения, а в конце скрывает индикатор выполнения и отображает форму.Это отлично работает в Firfox, но в IE он просто показывает заполненную форму.Я не обновляю пользовательский интерфейс до тех пор, пока функция не будет запущена и к тому времени все не будет завершено, но пользователь должен сидеть на экране без происшествий в течение нескольких секунд.Как сделать обновление пользовательского интерфейса в IE 8 при выполнении строк JavaScript в функции?

Пример:

ActionReportForms.prototype.LoadFormData = function (constId, formType) {
    //HOOK UP DATE PICKER
    $('#' + this.TPLDATEFIELD_ID).datepicker();
    $('#' + this.CRDATEFIELD_ID).datepicker();

    //CLEAR FIELDS
    this.ClearFormFields();

    //HIDE ERRORS
    this.ShowError(false, "");

    //SHOW PROGRESS BAR
    this.ShowProgress(true, 30, "loading...");

    this.ShowDialogBox();

    //POPULATE FIELDS
    this.GetAccountName(constId);
    this.ShowProgress(true, 60, "loading...proposals");
    this.GetProposlas(constId);
    this.ShowProgress(true, 90, "loading...action types");
    this.GetActionTypes();
    this.ShowProgress(true, 100, "loading...complete");
    this.ConstituentID = constId;
    $("#" + this.CONSTITUENTID_ID + ":input").val("");
    $("#" + this.CONSTITUENTID_ID + ":input").val(constId);





    //HIDE
    $('#' + this.TPLDATEFIELD_ID).datepicker("hide");
    $('#' + this.CRDATEFIELD_ID).datepicker("hide");

    //TOGGLE FORM
    if (formType != "") {
        ToggleForms(formType);
    }

    //HIDE PROGRESS BAR
    this.ShowProgress(false, 0, "");

}

Спасибо, T

Answer 1

Цепочка с помощью обратных вызовов.Все дело в обратных вызовах.Я избегаю их, потому что они уродливы и трудны для чтения, но они позволяют вам обновлять DOM, пока остальная часть вашего кода работает, в IE.Это не

function LoadFormCall(constId, formType) {
    //HOOK UP DATE PICKER
    $('#' + this.TPLDATEFIELD_ID).datepicker();
    $('#' + this.CRDATEFIELD_ID).datepicker();
    arfObj.hiddenStuff1 = constId;
    arfObj.hiddenStuff2 = formType;
    //CLEAR FIELDS
    arfObj.ClearFormFields();

    //HIDE ERRORS
    arfObj.ShowError(false, "");

    //SHOW PROGRESS BAR
    arfObj.ShowProgress(true, 30, "loading...");

    //OPEN DIALOG
    ShowDialogBox();

    //POPULATE FIELDS
    //THIS CALLS A JQUERY $.ajax call with a callback execute in the success function
    //AND SO BEGINS THE CHAIN.
    arfObj.GetAccountName1(constId, LoadFormCall2); 
};

function LoadFormCall2() {
    constId = arfObj.hiddenStuff1;
    arfObj.ShowProgress(true, 60, "loading...proposals");
    arfObj.GetProposals1(constId, LoadFormCall3);
};

function LoadFormCall3() {
    arfObj.ShowProgress(true, 90, "loading...action types");
    arfObj.GetActionTypes1(LoadFormCall4);
}

function LoadFormCall4(){
    arfObj.ShowProgress(true, 100, "loading...complete");
    arfObj.ConstituentID = constId;


    $("#" + arfObj.CONSTITUENTID_ID + ":input").val("");
    $("#" + arfObj.CONSTITUENTID_ID + ":input").val(constId);

    //HIDE
    $('#' + arfObj.TPLDATEFIELD_ID).datepicker("hide");
    $('#' + arfObj.CRDATEFIELD_ID).datepicker("hide");

    //TOGGLE FORM
    if (arfObj.hiddenStuff2 != "") {
        ToggleForms(arfObj.hiddenStuff2);
    }

    //HIDE PROGRESS BAR
    arfObj.ShowProgress(false, 0, "");
}

Answer 2

Это работает только в Firefox, потому что он подделывает синхронный XMLHttpRequest, используя асинхронный XMLHttpRequest.И пока он ожидает завершения запроса, он обновляет экран, потому что у него нет ничего лучше.

Но на самом деле вам следует прекратить использовать синхронный XMLHttpRequest.

Answer 3

Вы можете связать различные этапы вместе с window.setTimout (). Это дает браузеру немного времени для перерисовки страницы. В этом примере я установил тайм-аут на 1 мс. Я не уверен, что это поможет. Обратите внимание, что я запускаю цепочку в конце внешней функции.

ActionReportForms.prototype.LoadFormData = function (constId, formType) {
    //HOOK UP DATE PICKER
    $('#' + this.TPLDATEFIELD_ID).datepicker();
    $('#' + this.CRDATEFIELD_ID).datepicker();

    //CLEAR FIELDS
    this.ClearFormFields();

    //HIDE ERRORS
    var hideErrors = function()
    {
        this.ShowError(false, "");
        window.setTimeout(showProgessBar, 1);
    };

    //SHOW PROGRESS BAR
    var showProgressBar = function()
    {
        this.ShowProgress(true, 30, "loading...");
        this.ShowDialogBox();
        window.setTimeout(populateFields, 1);
    };

    //POPULATE FIELDS
    var populateFields = function()
    {
        this.GetAccountName(constId);
        this.ShowProgress(true, 60, "loading...proposals");
        window.setTimeout(loadProposals, 1);
    };

    var loadProposals = function()
    {
        this.GetProposlas(constId);
        this.ShowProgress(true, 90, "loading...action types");
        window.setTimeout(loadActionTypes, 1);
    };

    var loadActionTypes = function()
    {
        this.GetActionTypes();
        this.ShowProgress(true, 100, "loading...complete");
        this.ConstituentID = constId;
        $("#" + this.CONSTITUENTID_ID + ":input").val("");
        $("#" + this.CONSTITUENTID_ID + ":input").val(constId);

        //HIDE
        $('#' + this.TPLDATEFIELD_ID).datepicker("hide");
        $('#' + this.CRDATEFIELD_ID).datepicker("hide");

        //TOGGLE FORM
        if (formType != "") {
            ToggleForms(formType);
        }

        //HIDE PROGRESS BAR
        this.ShowProgress(false, 0, "");
    };

    // Start with hide errors.
    hideErrors();
};