最大調用堆棧大小超過chrome使用jQuery模板的錯誤

Question

我正在加載超過7000條記錄並將它們顯示在我的頁面上。

Firefox是做的很好，但我有使用Chrome

部分代碼中的錯誤：

<tbody> 
    {{each(i, item) value}} 
    <tr> 
     <td class="item_action"> 
      <a class="edit_item" data-item="${item.id}"> 
       <img src="path/to/image_edit.png" /> 
      </a> 

      <img src="path/to/image_separator.png" /> 

      <a class="delete_item" data-item="${item.id}"> 
       <img src="path/to/image_delete.png" /> 
      </a> 
     </td> 
     <td class="item_name">${item.name}</td> 
    </tr> 
    {{/each}} 
</tbody> 

如果不是上面的我呈現這樣的：

<tbody> 
    {{each(i, item) value}} 
    <tr> 
     <td class="item_name">${item.name}</td> 
    </tr> 
    {{/each}} 
</tbody> 

之後，Chrome沒有問題。所以我想這跟我讀取here的HTML的大小有關。

是否有解決此問題的方法？我

Answer 1

我有同樣的問題。如果你看看jquery.tmpl代碼，你可以找到

function build(tmplItem, nested, content) { ... 

的問題是在

jQuery.map(content, function(item) { 

的「內容」數組中的每一項（你有我在這裏想超過50000元）應該稱爲功能。這對於Webkit瀏覽器來說太多了。 這段代碼被修改了一點，解決我的問題：

function build(tmplItem, nested, content) { 
    // Convert hierarchical content into flat string array 
    // and finally return array of fragments ready for DOM insertion 
    var processMap = function(){ 
     var result = []; 
     var items = []; 
     for(var i = 0; i<content.length; (i = i+10000)){ 
      var subcontent = content.slice(i, i+10000); 
      items = jQuery.map(subcontent, function(item) { 
         return (typeof item === "string") ? 
          // Insert template item annotations, to be converted to jQuery.data("tmplItem") when elems are inserted into DOM. 
          (tmplItem.key ? item.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2") : item) : 
          // This is a child template item. Build nested template. 
          build(item, tmplItem, item._ctnt); 
      }); 
      result = result.concat(items); 
     } 
     return result; 
    }; 
    var frag, ret = content ? processMap(): 
    // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}. 
    tmplItem; 
    if (nested) { 
     return ret; 
    } ... 

所以jQuery.map功能過程中的每個元素10000，並且不允許「最大調用堆棧大小超出了」。

這是一個粗略的解決方案，但希望它可以幫助你:)