maximum call stack size exceeded error in chrome using jquery templates

2019独角兽企业重金招聘Python工程师标准>>>

I had the same issue. If you look to jquery.tmpl code you can find

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

The problem is in

jQuery.map( content, function( item ) {

for each item in the 'content' array (and you have i guess more than 50000 elements here) should be called function. This is too much for Webkit browsers. This code was modified a little to solve my issue:

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

So jQuery.map function process each 10000 elements and doesn't allow 'Maximum call stack size exceeded'.

This is a crude solution but hope it helps you :)

转载于:https://my.oschina.net/yves175/blog/1301819