页面就绪时JQuery无法读取WebSQL表数据及异步事务疑问

我通过页面及脚本创建WebSQL数据库、创建表并填充数据。在第二个页面中，尝试在页面加载时访问数据却无法获取。

问题代码 #

$(document).ready(function(){
  db = openDatabase('mydb', '1.0', 'My Data', 2 * 1024 * 1024);
  db.transaction(function(tx){
        tx.executeSql("select username, fullname from currentuser", [], function(tx, results){
            if( results.rows.length > 0 ){
                console.info("Found: " + results.rows.item(0).username);
                return new LoggedInUser(results.rows.item(0).username, results.rows.item(0).fullname);
            }
            return null;
        });
  });
});

调试现象 #

• 添加断点调试时，Chrome开发者工具的Application标签仅显示数据库名称和表名，点击表后右侧详情面板为空；页面加载完成并显示后，Application标签刷新，所有表数据才显示。
• 更新： 调试时发现异常执行流程：执行箭头跳转到db.transaction行后跳出函数，在函数外部打印username为undefined，之后才跳转到tx.executeSql行并输出预期的Found...内容。疑问：事务是否为异步执行？

解决方案及解释 #

• WebSQL的transaction和executeSql都是异步执行的，这是核心原因。异步操作不会阻塞主流程，代码会先执行完db.transaction之后的外部逻辑，等数据库操作完成后才会触发回调函数。
• 原代码试图在异步回调中返回LoggedInUser实例，但这个返回值无法被外部同步代码获取，导致外部打印username为undefined。
• 正确的做法是把依赖数据库数据的逻辑放在executeSql的回调函数内部，或者用Promise封装异步操作来保证时序。
• Chrome Application面板的显示延迟是因为异步操作未完成时数据还未写入数据库，等异步回调执行完毕数据持久化后，刷新面板才能看到内容。

修复后的代码示例（基于回调处理） #

$(document).ready(function(){
  db = openDatabase('mydb', '1.0', 'My Data', 2 * 1024 * 1024);
  db.transaction(function(tx){
        tx.executeSql("select username, fullname from currentuser", [], function(tx, results){
            if( results.rows.length > 0 ){
                console.info("Found: " + results.rows.item(0).username);
                const user = new LoggedInUser(results.rows.item(0).username, results.rows.item(0).fullname);
                // 在这里处理用户数据，比如渲染页面元素
                renderUser(user);
            } else {
                // 处理无用户数据的场景
                handleUnauthorized();
            }
        });
  });
});

// 示例：渲染用户信息
function renderUser(user) {
  document.getElementById('user-fullname').textContent = user.fullname;
}

// 示例：处理未登录场景
function handleUnauthorized() {
  window.location.href = '/login.html';
}

内容的提问来源于stack exchange，提问作者Hussain Akbar