javascript push() 在 Cordova 上不起作用

Question

我在获取 sqlite 数据 Cordova-sqlite-storage 插件并在 Cordova 应用程序上放入菜单时遇到问题。

请参阅我的代码部分：

var db = window.sqlitePlugin.openDatabase({name: "test.db", location: 'default'});
var items = [];
db.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM categories', [], function (tx, results) {
    for (i = 0; i < results.rows.length; i++){
        items.push('<li data-page="categories" data-value="'+results.rows.item(i).cat_id+'"><a href="#"><i class="fa fa-'+results.rows.item(i).cat_icon+'"></i><em>'+results.rows.item(i).cat_title+'</em></a></li>');
        alert('<li data-page="categories" data-value="'+results.rows.item(i).cat_id+'"><a href="#"><i class="fa fa-'+results.rows.item(i).cat_icon+'"></i><em>'+results.rows.item(i).cat_title+'</em></a></li>');
    }
}, null);
});
items.push('<li data-page="categories" data-value="aaa"><a href="#"><i class="fa fa-check"></i><em>Teste</em></a></li>');
jQuery('.menu').append(items);

问题是 for（） 中的 items.push（） 不起作用。为什么？

for（） 中的 alert（） 正确显示数据。

第二个 items.push（） 工作正常。

Answer 1

你缺少代码的异步行为。由于对数据库的事务需要一些时间才能完成，因此提供了一个回调来侦听此完成，无论成功还是错误。

在您的代码中：

items.push('<li data-page="categories" data-value="aaa"><a href="#"><i class="fa fa-check"></i><em>Teste</em></a></li>');
jQuery('.menu').append(items); 

这比你的回调之前被调用。

要解决这个问题，您必须将处理 DOM 修改的代码行移动到回调中，其中有结果可用，就在 for 循环之后：

var db = window.sqlitePlugin.openDatabase({name: "test.db", location: 'default'});
var items = [];
db.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM categories', [], function (tx, results) {
    for (i = 0; i < results.rows.length; i++){
        items.push('<li data-page="categories" data-value="'+results.rows.item(i).cat_id+'"><a href="#"><i class="fa fa-'+results.rows.item(i).cat_icon+'"></i><em>'+results.rows.item(i).cat_title+'</em></a></li>');
        alert('<li data-page="categories" data-value="'+results.rows.item(i).cat_id+'"><a href="#"><i class="fa fa-'+results.rows.item(i).cat_icon+'"></i><em>'+results.rows.item(i).cat_title+'</em></a></li>');
    }
    jQuery('.menu').append(items);
}, null);
});