为何WebSQL相关函数未按预期顺序执行？执行顺序异常咨询

我尝试编写一个从WebSQL表中读取数据的函数，但运行代码时仅在alert 2处能获取到数组中的数据。代码如下：

function read(table, keys){ 
  var data = []; 
  var db = window.openDatabase("Database", "1.0", "PMM", 200000); 
  db.transaction(function (tx) { 
    tx.executeSql('SELECT * FROM ' + table, [], function (tx, results) { 
      var len = results.rows.length; 
      for(var i = 0; i < len; i++){ 
        var row = []; 
        for(key of keys){ 
          row.push(results.rows.item(i)[key]); 
        } 
        data.push(row); 
      } 
      alert(data + " --2--"); 
    }); 
    alert(data + "--3--"); 
  }); 
  alert("--4--") 
  return data; 
} 
var a = read("expenses", ['name', 'cost']); 
alert(a + "--1--");

我预期alert的执行顺序为--2--、--3--、--4--、--1--，但实际顺序是--4--、--1--、--3--、--2--，请问这是为什么？

这核心原因是WebSQL的操作都是异步的，JavaScript是单线程语言，会优先执行同步代码，异步任务会被放到任务队列中，等同步代码执行完后才会依次执行。我们一步步拆解你的代码执行流程：

1. 调用read函数后，首先同步执行var data = []、var db = window.openDatabase(...)这些代码。
2. 接下来调用db.transaction()——这是一个异步API，浏览器不会等待它内部的代码执行完成，而是把这个异步任务放进任务队列，继续往下执行同步代码：alert("--4--")，然后return data（这时候data还是空数组）。
3. 函数read执行完毕，外部代码同步执行alert(a + "--1--")，这里的a就是空数组，所以先弹出--4--、--1--。
4. 等同步代码都执行完了，浏览器才开始处理任务队列里的异步任务：首先执行db.transaction的回调函数，里面先同步执行alert(data + "--3--")——这时候tx.executeSql还没执行完，data还是空的，所以弹出空数组加--3--。
5. 最后tx.executeSql的查询操作完成（这是另一个异步步骤），它的回调函数被执行，这时候才会填充data数组，然后执行alert(data + " --2--")，这时候你才能看到有数据的数组。

另外，你现在的return data是在异步操作完成前就执行了，所以外部拿到的永远是空数组。如果要正确获取数据，你需要用Promise来封装异步操作，比如：

function read(table, keys){ 
  return new Promise((resolve, reject) => {
    var data = []; 
    var db = window.openDatabase("Database", "1.0", "PMM", 200000); 
    db.transaction(function (tx) { 
      tx.executeSql('SELECT * FROM ' + table, [], function (tx, results) { 
        var len = results.rows.length; 
        for(var i = 0; i < len; i++){ 
          var row = []; 
          for(key of keys){ 
            row.push(results.rows.item(i)[key]); 
          } 
          data.push(row); 
        } 
        resolve(data); // 数据准备好后resolve
      }, function(error) {
        reject(error); // 处理查询错误
      }); 
    }); 
  });
} 

// 使用的时候
read("expenses", ['name', 'cost']).then(a => {
  alert(a + "--1--");
}).catch(err => {
  console.error('读取失败:', err);
});

这样就能保证在数据真正读取完成后，再执行后续的操作，alert的顺序也会符合你的预期逻辑。

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