在getJSON加載數據期間顯示jQuery模態進度條

我試圖在加載數據時顯示模式對話框。流程是這樣的：在getJSON加載數據期間顯示jQuery模態進度條

showProgressBar(); 

$.ajaxSetup({ 
    async: false 
}); 

loadData(file); 

$.ajaxSetup({ 
    async: true 
}); 

removeProgressBar();

我也試過這樣：

$.ajaxSetup({ 
    async: false 
}); 

$(document).ajaxStart(function(){ 
showProgressBar(); 
}); 

loadData(file); 

$.ajaxSetup({ 
    async: true 
}); 

$(document).ajaxStop(function(){ 
    removeProgressBar(); 
});

我的功能看起來像：

function showProgressBar(){ 

    var theBody = d3.select("body") 
        .append("div") 
        .attr("title", "Processing") 
        .attr("class", "ui-widget-content uncollapsebox") 
        .attr("id", "progressDialog") 
        .append("div") 
         .attr("id", "progressbar") 
         .attr("width",200) 
         .attr("height",20) 

$(function() { 
    $("#progressbar").progressbar({ 
    value: false 
    }); 
}); 

$(function() { 
    $("#progressDialog").dialog({modal: true, 
            closeOnEscape: false 
            }); 
}); 

} 

function removeProgressBar(){ 
    $('#progressDialog').dialog('close'); 
    $('#progressDialog').remove(); 
}

我加載文件看起來像：

function loadData(nameOfFile){ 

    $(function(){ 
     $.getJSON("...",function(data){ 

     }).error(function(){ 
      console.log('error loading data!'); 
     }); 
    }); 
    console.log("done with getJSON"); 
}

我已經嘗試了許多變化，但要麼th e模式沒有顯示，或者它被顯示並且沒有被移除或者它被顯示，然後我得到一個錯誤說：錯誤：在初始化之前不能在對話框上調用方法;試圖調用方法'關閉'。 show和remove函數在自己調用時可以很好地工作。控制檯。

p.s.我使用async：false，因爲我在加載數據後立即計算數據，如果我不這樣做，當然不會等待所有數據加載。

來源

2013-06-21 SOUser

不幸的是，如果將異步設置爲false，則瀏覽器將凍結，直到ajax查詢返回。如果您希望獲得進度條等上下文線索，則需要保持async爲true，並在您的ajax調用的成功回調中調用removeProgressBar。

來源

2013-06-21 04:13:36 climbage

HI攀爬，感謝您的快速回復。關於我的文章的這一部分：「我在加載後立即對數據進行計算」您能否建議我如何處理流程，以便我可以擁有進度欄並阻止程序繼續運行，直到數據完全加載。這是否意味着在我的成功回調中的負載之後調用所有內容？ – SOUser

嘿我試過了，它的工作，非常感謝！ – SOUser

在getJSON加載數據期間顯示jQuery模態進度條

回答

相關問題