如何使用隊列，以防止

我使用的是MVC剃刀foreach渲染圖表加載時間長，有時超過150如何使用隊列，以防止

我這是怎麼生成的腳本來渲染多個HighCharts：

@{chartCount = 0;} 
@foreach (var item in Model.ChartRows.Where(m => !m.SummaryRow)) 
    { 
     $('#[email protected](chartCount)').highcharts({ 
      //code removed for brevity 
     }); 
     chartCount++; 
    }

然後在我的HTML我用這個來呈現容器：

@for (int i = 0; i < chartCount; i++) 
    { 
     <div id="[email protected](i)"></div><br /> 
    }

然而，當有項目100個在ChartRows，頁面可以採取LON g突然之前加載所有圖表。我在HighCharts網站上看了一下，發現了一種名爲「Sparkline」的圖表類型，jsFiddle example顯示了一種方法，即可以使用setTimout來延遲渲染，然後將它們渲染爲「塊」。

對於我來說，我需要這樣做，我將不得不從腳本中刪除所有數據（或者至少從item.填充任何內容），而是將7個以上的數據屬性添加到每個HTML容器並使用jQuery來獲取這些數據屬性來填充圖表數據。我對這種方法並不感到興奮，因爲它可能會讓故障排除變成一場噩夢。

是否有人知道是否有可能將每個正在渲染的圖表添加到某種類型的隊列中，以便它們一次呈現1而不是瀏覽器在同一時間全部渲染它們？

來源

2015-04-01 wf4

也許更好的是在可見部分負荷圖頁面，然後抓住滾動事件並加載其他？ – 2015-04-01 14:06:21

謝謝@SebastianBochan，我正在考慮某種「懶惰」。我真的希望可以有一些方法可以做到這一點，而無需添加額外的標記（這通常是拉載要求）。 – wf4 2015-04-01 14:24:47

但您剛給我一個主意！我將嘗試創建每個圖表作爲var /函數，然後調用每個圖表以使用計時器進行渲染... – wf4 2015-04-01 14:25:27

這是我做的：

<script> 
var chartFunctions = []; 
@foreach (var item in Model.ChartRows.Where(m => !m.SummaryRow)) 
{ 
    var [email protected](item.ID) = function() { 
     $('#[email protected](item.ID)').highcharts({ 
      //code removed for brevity 
     }); 
    } 
    //add this function into the array 
    chartFunctions.push([email protected](item.ID)); 
} 


    function renderCharts() { 
     var time = +new Date(), 
      len = chartFunctions.length; 

     for (i = 0; i < len; i += 1) { 

      //call each function in the function array 
      chartFunctions[i](); 

      // If the process takes too much time 
      if (new Date() - time > 500) { 
       chartFunctions.splice(0, i + 1); 
       setTimeout(renderCharts, 0); 
       break; 
      } 
     } 
    } 

    renderCharts(); 
</script>

而且我還需要使用一個foreach到chartID和數據筒匹配：

@foreach (var item in Model.ChartRows.Where(m => !m.SummaryRow)) 
{ 
    <div id="[email protected](item.ID)"></div><br /> 
}

來源

2015-04-10 09:40:10 wf4

如何使用隊列，以防止

回答

相關問題