Javascript handlebar.js：在不阻塞UI的情况下呈现大数据–；使用setTimeout（）延迟或延迟加载？

我想使用将大量数据加载到HTML表中，但web浏览器往往会冻结。因此，我正在寻找一种防止用户界面阻塞的方法

以我以前的方式修改

每个

帮助程序无法工作，因为帮助程序在生成

ret

之前返回：

JavaScript：

Handlebars.registerHelper('lazyeach', function(context, options) {
    var fn = options.fn;
    var i = 0, ret = "", data;

    if (Handlebars.Utils.isFunction(context)) { context = context.call(this); }

    if (options.data) {
        data = Handlebars.createFrame(options.data);
    }

    if(context && typeof context === 'object') {
        if (Handlebars.Utils.isArray(context)) {

            var loop = function() {

                for(var j = context.length; i<j; i++) {
                    if (data) {
                        data.index = i;
                        data.first = (i === 0);
                        data.last  = (i === (context.length-1));
                    }
                    ret = ret + fn(context[i], { data: data });

                    if (i % 100 == 0) {
                        i++;
                        setTimeout(loop, 5);
                        break;
                    }
                }
            }
            loop();
        }
    }
    return ret;
});

<table>
    <!-- … -->
    <tbody>
    {{#lazyeach data}}
        <tr>
            {{#data}}
                <td>{{data}}</td>
            {{/data}}
        </tr>
    {{/lazyeach}}
    </tbody>
</table>

handlebar.registerHelper（'lazyach'，函数（上下文，选项）{
var fn=options.fn；
变量i=0，ret=”，数据；
if（handlebar.Utils.isFunction（context））{context=context.call（this）；}
如果（选项.数据）{
data=handlebar.createFrame（options.data）；
}
if（context&&typeof context==='object'）{
if（车把.实用工具.isArray（上下文））{
var循环=函数（）{
对于（var j=context.length；i为什么不使用已经通过js提供的内容并实现一个混合解决方案

<script>
var rowTemplateSource = $("#your-row-template").html();
var rowTemplate = Handlebars.compile(rowTemplateSource);

while(yourdata.length) {
    setTimeout(function(){
        rowTemplate(yourdata.splice(0,500)); //500 records per loop
    }, 500 /* 500ms between loops */);
}
</script>


<script id="your-row-template" type="text/x-handlebars-template">
<table>
<!-- … -->
<tbody>
{{#each data}}
    <tr>
        {{#data}}
            <td>{{data}}</td>
        {{/data}}
    </tr>
{{/each}}
</tbody>
</table>
</script>


var rowTemplateSource=$（“#您的行模板”）.html（）；
var rowTemplate=handlebar.compile（rowTemplateSource）；
while（yourdata.length）{
setTimeout（函数（）{
行模板（yourdata.splice（0500））；//每个循环500条记录
}，500/*500ms在回路之间*/）；
}
{{{#每个数据}
{{{#数据}
{{data}}
{{/data}
{{/每个}}

我根本没有测试过它，因此可能需要对循环/etc进行一些调整，以满足您的需要，但我相信它应该会起作用。
要使它起作用，handlebar.registerHelper必须支持一个返回的承诺，但它似乎不支持。也许您可以在发布之前将数据分解成更小的块ocessed？@Remento我刚刚编写了一个助手（基于
每个
），它将上下文分割成500块，并将模板更改为
{{{{eachFromTo data 0 499}}}…{{{/eachFromTo}{{{eachFromTo data 500 999}}…{{/eachFromTo}}{/code>，但是它没有任何改进。可能需要多次调用把手（并在调用Handelbars之前破坏数据）但我不知道如何做到这一点。