JavaScript异步代码问题：WebSql初始化时循环执行不符合预期

兄弟，我太懂这种被JS异步代码反复折磨的滋味了！尤其是WebSQL这种回调式的API，循环操作简直是新手噩梦——你明明写的是按顺序执行的逻辑，结果跑起来要么顺序乱了，要么数据插重复了，要么直接报错，对吧？

问题根源 #

WebSQL的executeSql是异步操作，如果你用普通的for循环直接调用它，循环会先一口气跑完（同步执行），而所有的executeSql请求会排队等待执行。更坑的是，如果循环里用了未正确捕获的变量，还会出现所有请求都用最后一次循环变量值的情况，完全不符合预期。

解决方案1：用递归实现串行异步操作 #

这是最贴合你现有代码的改法，不用引入新语法，靠递归让每一次异步操作完成后再执行下一次：

$(document).ready(function() {
  initdatabase();
});

function initdatabase() {
  var db = window.openDatabase("nothing", "1.0", "nothing", 2 * 1024 * 1024);
  db.transaction(function(trans) {
    // 先确保表创建成功
    trans.executeSql(
      "CREATE TABLE IF NOT EXISTS your_table (id INTEGER PRIMARY KEY, content TEXT)",
      [],
      function(trans, result) {
        console.log("表创建成功");
        // 假设你要初始化的默认数据
        const defaultData = ["数据1", "数据2", "数据3", "数据4"];
        
        // 递归插入函数：完成一条再插下一条
        function insertData(index) {
          // 递归终止条件：所有数据插完
          if (index >= defaultData.length) {
            console.log("所有初始化数据插入完成！");
            return;
          }
          
          const currentItem = defaultData[index];
          trans.executeSql(
            "INSERT INTO your_table (content) VALUES (?)",
            [currentItem],
            function() {
              console.log(`第${index+1}条数据插入成功`);
              // 成功后递归调用，插下一条
              insertData(index + 1);
            },
            function(trans, error) {
              console.error(`插入失败：${error.message}`);
            }
          );
        }
        
        // 启动递归插入
        insertData(0);
      },
      function(trans, error) {
        console.error("建表失败：" + error.message);
      }
    );
  });
}

这个方法的核心是：让上一个executeSql的成功回调触发下一次操作，强制异步操作串行执行，完全符合你预期的顺序。

解决方案2：用Promise+async/await简化异步逻辑 #

如果你习惯更直观的“同步写法”，可以把WebSQL的回调API封装成Promise，再用async/await让代码逻辑更清晰：

$(document).ready(function() {
  initdatabase().catch(err => console.error("初始化出错：", err));
});

// 把executeSql封装成Promise
function sqlPromise(trans, sql, params = []) {
  return new Promise((resolve, reject) => {
    trans.executeSql(
      sql,
      params,
      (trans, res) => resolve(res),
      (trans, err) => reject(err)
    );
  });
}

async function initdatabase() {
  var db = window.openDatabase("nothing", "1.0", "nothing", 2 * 1024 * 1024);
  
  // 把transaction也封装成Promise
  await new Promise((resolve, reject) => {
    db.transaction(async (trans) => {
      try {
        // 建表
        await sqlPromise(trans, "CREATE TABLE IF NOT EXISTS your_table (id INTEGER PRIMARY KEY, content TEXT)");
        console.log("表创建成功");
        
        const defaultData = ["数据1", "数据2", "数据3", "数据4"];
        
        // 用for...of循环+await，串行插入
        for (const [idx, item] of defaultData.entries()) {
          await sqlPromise(trans, "INSERT INTO your_table (content) VALUES (?)", [item]);
          console.log(`第${idx+1}条数据插入成功`);
        }
        
        console.log("初始化全部完成！");
        resolve();
      } catch (err) {
        reject(err);
      }
    });
  });
}

这种写法把异步代码“伪装”成同步逻辑，每一次await都会等待当前异步操作完成后再继续，完全不用操心回调嵌套和顺序问题，可读性高很多。

小提醒 #

WebSQL其实已经被W3C废弃了，如果你的项目是新开发的，更推荐用IndexedDB或者其他现代前端存储方案；但如果是维护老项目必须用WebSQL，上面两种方法都能完美解决你的循环异步问题。

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