Vòng lặp jQuery AJAX để làm mới jQueryUI ProgressBar

Question

Tôi đã có thanh tiến trình jQueryUI sẽ hiển thị phần trăm truy vấn được thực hiện. Oracle có một bảng hệ thống tốt đẹp cho phép bạn xem các hoạt động sẽ mất hơn 10 giây. Tôi đang cố gắng làm cho các cuộc gọi $ .ajax đáng kinh ngạc đến truy vấn này để làm mới thanh tiến trình.

Vấn đề là tôi có thể nhận các vòng lặp để thực hiện các yêu cầu nhanh chóng mà không phải chờ đợi hoặc chỉ trì hoãn toàn bộ JavaScript khi thực thi.

Tôi bắt đầu yêu cầu đầu tiên bằng cách nhấp vào nút "Thực thi" trong hộp thoại jQueryUI.

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

Tôi đang cố gắng để xây dựng một trong hai StartLoop() chức năng hoặc thực hiện một GetProgress() hàm đệ quy. Lý tưởng nhất, tôi sẽ có một biến công khai var isDone = false để hoạt động như chỉ báo của tôi khi nào chấm dứt vòng lặp hoặc dừng đệ quy gọi hàm đó.

Để đơn giản tôi đã chỉ cần thực hiện một vòng lặp tĩnh mà thực hiện 100 lần:

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

và đây là yêu cầu mẫu ajax của tôi:

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

Vì vậy, những gì tôi đã tìm thấy là, cho đến nay:

setTimeout(GetProgress(), 3000) trong StartLoop() đóng băng Javascript và hộp thoại không đóng (tôi giả định, vì nó sẽ đợi cho đến khi truy vấn được thực hiện).

This một, pausecomp(3000) thực hiện tương tự như vậy.

Nếu tôi gọi một trong hai chức năng này trong chức năng "thành công" của yêu cầu AJAX, nó sẽ bị bỏ qua (có thể vì nó bắt đầu một cuộc gọi không đồng bộ).

Tôi bị mắc kẹt ở đây, mọi trợ giúp sẽ được đánh giá cao, cảm ơn.

Answer 1

Thay vì setTimeout(GetProgress(), 3000), bạn sẽ muốn:

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

Nếu không, tất cả 100 sẽ bắn ra sau 3 giây. Thay vào đó, bạn muốn 0, 3000, 6000, 9000, v.v.3000*i;

Better, bạn có thể sử dụng setInterval và clearInterval:

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

và gọi lại, làm:

$.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 sẽ ngăn chặn nó từ gọi GetProgress() một lần nữa. Sử dụng phương thức setInterval có nghĩa là bạn không cần phải biết có bao nhiêu vòng thăm dò ý kiến ​​bạn cần lên phía trước. Nó sẽ đơn giản tiếp tục cho đến khi bạn hoàn thành.

Hoặc tốt hơn, bạn có thể gọi GetProgress() từ callback ajax, với ưu điểm là nó sẽ chỉ thăm dò ý kiến ​​một lần nữa một khi bạn có một phản ứng từ truy vấn của bạn:

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

Sau đó, chỉ cần gọi GetProgress() một lần để bắt đầu vòng lặp.

Answer 2

Tôi tin rằng những gì bạn muốn làm là gọi lại hàm getProgress khi hoàn thành.

Bạn sẽ làm điều này bằng cách thêm param 'hoàn toàn' để cuộc gọi 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 
}); 

Đây là phương pháp thường được gọi là 'bỏ phiếu'.