javascript - Handlebars.js:渲染大数据而不阻塞 UI – 使用 setTimeout() 延迟或延迟加载？

Question

我想使用 Handlebars 将大量数据加载到 HTML 表中，但网络浏览器往往会卡住。所以我正在寻找一种方法来防止用户界面阻塞。

按照我的方式修改 each 助手是行不通的，因为助手在生成 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;
});

Handlebars 模板:

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

您知道另一种方法吗？或者您可以帮助我让当前的方法发挥作用吗？

编辑: 我不坚持使用 Handlebars.js。因此，如果您知道可以实现上述目的的替代方案，请继续。

Answer 1

为什么不使用 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>

我根本没有对此进行过测试，因此可能需要对循环等进行一些调整才能满足您的需求，但我相信它应该可以工作。