scope - 如何使用“.each”方法产生的数据结果？

Question

我使用Dexie.js（一个IndexedDbwapper）。

我试过生成这样的 HTML：

function getList(where){
    var html = [];
    if($.isEmptyObject(where)) return;
    db.modules.where(where).each(function(item){
        html.push('<div class="module-item">');
        html.push('<div class="module-item-pic"><img src="' + item.modu_pic + '" class="img-fluid" /></div>');
        ....
        html.push('</div>')
        html.push('</div>');
    })
    console.log(html.join(''));
}

但上面的代码什么也没输出。

但是，当我将console.log(html.join(''))回调放入.each：

function getList(where){
    var html = [];
    if($.isEmptyObject(where)) return;
    db.modules.where(where).each(function(item){
        html.push('<div class="module-item">');
        html.push('<div class="module-item-pic"><img src="' + item.modu_pic + '" class="img-fluid" /></div>');
        ....
        html.push('</div>')
        html.push('</div>');
console.log(html.join(''));
    })

}

为什么我的第一个代码片段没有显示任何输出？

Answer 1

请记住，Dexie 操作通常是异步的。问题是您的第一个代码片段会在任何异步操作完成之前console.log(html.join('')) 立即执行。

在尝试输出到控制台之前，您需要使用返回的承诺.each等到所有迭代完成：

function getList(where){
    var html = [];
    if($.isEmptyObject(where)) return;
    db.modules.where(where).each(function(item){
        html.push('<div class="module-item">');
        html.push('<div class="module-item-pic"><img src="' + item.modu_pic + '" class="img-fluid" /></div>');
        ....
        html.push('</div>')
        html.push('</div>');
    }).then(function () {
      console.log(html.join(''));
    });
}