jQuery AJAX цикл для обновления jQueryUI ProgressBar

Question

jQuery AJAX цикл для обновления jQueryUI ProgressBar

У меня есть jQueryUI progressbar, который должен показывать процент выполненного запроса. Oracle имеет хорошую системную таблицу, которая позволяет просматривать операции, которые займут более 10 секунд. Я пытаюсь заработать ошеломляющие $.AJAX-вызовы, чтобы этот запрос, чтобы обновить прогресс-бар.

Проблема в том, что я могу либо заставить циклы делать быстрые запросы без какого-либо времени ожидания, либо просто задержать выполнение всего JavaScript.

Я начинаю первый запрос, щелкнув мой Кнопка "выполнить" в диалоговом окне jQueryUI.

$("#dlgQuery").dialog({

    buttons: {

        Execute: function () {

            $(this).dialog("close");

            StartLoop();

        }

    }

});

Я пытаюсь построить либо функцию StartLoop(), либо рекурсивную функцию GetProgress(). В идеале, у меня будет публичная переменная var isDone = false, которая будет служить моим индикатором для того, когда завершать цикл или останавливать рекурсивный вызов функции.

Для простоты я только что сделал статический цикл, который выполняется 100 раз:

function StartLoop(){

    for (var i = 0; i < 100; i++) {

        GetProgress();

    }

}

И вот мой пример запроса ajax:

function GetProgress() {

    $.ajax({

        url: "query.aspx/GetProgress",

        success: function (msg) {

            var data = $.parseJSON(msg.d);

            $("#pbrQuery").progressbar("value", data.value);

            //recursive?

            //GetProgress();



            //if (data.value == 100) isDone = true;                

        }

    });

}

Итак, что я нашел, пока:

setTimeout(GetProgress(), 3000) в StartLoop() зависает Javascript, и диалог не закрывается (я предполагаю, потому что он будет ждать, пока запрос не будет выполнен).

Этот , pausecomp(3000) делает почти то же самое.

Если я вызываю любой из них в функции "success" моего запроса AJAX, он игнорируется (вероятно, потому, что он запускает другой вызов асинхронно).

Я вроде как застрял здесь, любая помощь была бы признательна, спасибо.

704 2

jQuery javascript jquery-ui

2 ответов:

Comments

Ничего не найдено.

Jeff B · Accepted Answer · 2013-11-27 01:18:28

Вместо setTimeout(GetProgress(), 3000), Вы бы хотели:
function StartLoop(){
    for (var i = 0; i < 100; i++) {
        setTimeout(GetProgress(), 3000*i);
    }
}
В противном случае все 100 выстрелят через 3 секунды. Вместо этого вы хотите 0, 3000, 6000, 9000 и т. д., то есть 3000*i;

Лучше , вы могли бы использовать setInterval и clearInterval:
var myInterval = setInterval(GetProgress(), 3000);
И в обратном вызове сделайте:
$.ajax({
    url: "query.aspx/GetProgress",
    success: function (msg) {
        var data = $.parseJSON(msg.d);
        $("#pbrQuery").progressbar("value", data.value);

        if (data.value == 100) {
            isDone = true;
            clearInterval(myInterval);
        }          
    }
});
clearInterval остановит его от вызова GetProgress() снова. Использование метода setInterval означает, что вам не нужно знать, сколько циклов опроса вам нужно заранее. Это будет просто продолжаться, пока вы не будете сделано.

Или еще лучше , Вы можете вызвать GetProgress() из обратного вызова ajax, с тем преимуществом, что он будет опрашивать снова только после того, как вы получите ответ на свой запрос:
function GetProgress() {
    $.ajax({
        url: "query.aspx/GetProgress",
        success: function (msg) {
            var data = $.parseJSON(msg.d);
            $("#pbrQuery").progressbar("value", data.value);

            if (data.value == 100) {
                isDone = true;
            } else {
                setTimeout(GetProgress(), 2000);
            }
        }
    });
}
Затем просто вызовите GetProgress() один раз, чтобы запустить цикл.

Ohgodwhy · Accepted Answer · 2012-03-03 00:04:43

Я полагаю, что вы хотите снова вызвать функцию getProgress, когда она завершится.

Это можно сделать, добавив' complete ' param к вызову ajax
$.ajax({
  //this is where your stuff already is
  ,complete: getProgress()

  //we add a timeout so it doesn't run everytime it completes, only when we want to update the progress bar.
  ,timeout: 10000 //this is 10 seconds
});
Этот метод обычно называют "опросом".