jQuery Pętla AJAX do odświeżenia jQueryUI ProgressBar

Question

Mam pasek postępu jQueryUI, który powinien pokazywać procent wykonanego zapytania. Oracle ma ładną tabelę systemową, która pozwala zobaczyć operacje, które zajmie więcej niż 10 sekund. Próbuję wykonać rozłożone wezwania $ .ajax do tego zapytania, aby odświeżyć pasek postępu.

Problem polega na tym, że mogę albo uzyskać pętle, aby wykonać szybkie żądania pożaru bez żadnego czasu oczekiwania, albo po prostu opóźnić wykonanie całego skryptu JavaScript.

Uruchamiam pierwsze żądanie, klikając przycisk "Wykonaj" w oknie dialogowym jQueryUI.

$("#dlgQuery").dialog({ 
    buttons: { 
     Execute: function() { 
      $(this).dialog("close"); 
      StartLoop(); 
     } 
    } 
}); 

Próbuję zbudować zarówno funkcję StartLoop() lub dokonać rekurencyjną GetProgress() funkcję. Najlepiej byłoby, gdyby publiczna zmienna miała być wskaźnikiem, kiedy przerwać pętlę lub zatrzymać rekurencyjne wywoływanie funkcji.

Dla uproszczenia właśnie popełnił statycznej pętli, która wykonuje 100 razy:

function StartLoop(){ 
    for (var i = 0; i < 100; i++) { 
     GetProgress(); 
    } 
} 

A oto moja prośba próbki 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;     
     } 
    }); 
} 

Więc co znalazłem to, do tej pory:

setTimeout(GetProgress(), 3000) w StartLoop() zawiesza JavaScript, a okno dialogowe nie zamyka się (zakładam, ponieważ będzie czekać, aż zapytanie zostanie wykonane).

This jeden, pausecomp(3000) robi to samo.

Jeśli zadzwonię do któregokolwiek z nich w funkcji "sukces" mojego żądania AJAX, zostanie ono zignorowane (prawdopodobnie dlatego, że rozpoczyna asynchronicznie inne połączenie).

Trochę utknąłem tutaj, każda pomoc będzie doceniona, dzięki.

Answer 1

Zamiast setTimeout(GetProgress(), 3000), co chcesz:

function StartLoop(){ 
    for (var i = 0; i < 100; i++) { 
     setTimeout(GetProgress(), 3000*i); 
    } 
} 

W przeciwnym razie, wszystkie 100 będzie wystrzelić po 3 sekundach. Zamiast tego potrzebujesz 0, 3000, 6000, 9000 itd., Tj.3000*i;

Lepsze, można użyć setInterval i clearInterval:

var myInterval = setInterval(GetProgress(), 3000); 

aw zwrotnego, należy:

$.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 zatrzyma go przed wywołaniem GetProgress() ponownie. Korzystanie z metody setInterval oznacza, że ​​nie musisz wiedzieć, ile pętli odpytywania potrzebujesz z góry. To będzie po prostu trwało, dopóki nie skończysz.

Albo jeszcze lepiej, można zadzwonić GetProgress() z ajax zwrotnego, z tą zaletą, że będzie ankiecie tylko kolejny raz masz odpowiedź zapytanie:

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); 
      } 
     } 
    }); 
} 

Następnie wystarczy zadzwonić GetProgress() raz zainicjuj pętlę.

Answer 2

Uwierzę, że to, co chcesz zrobić, to ponownie wywołać funkcję getProgress po jej zakończeniu.

Można by to zrobić poprzez dodanie 'kompletny' param do ajax rozmowy

$.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 
}); 

Jest to metoda powszechnie zwany 'odpytywania'.