javascript - Html5 WebSql 事务行为异常并带有警报

Question

当我在代码中添加一些警报时，WebSql 的事务表现得很奇怪。我有三笔交易要做。它们是 t1、t2 和 t3。

以下代码按预期工作得很好。

 var db = openDatabase('DBTest', "1.0", "Example DB", "200000");
    db.transaction(function(tx) {
        alert('Tranasction.1........');
        jQuery('body').append('<h1>Added a h1 by t1</h1>');
    });
    db.transaction(function(tx) {
        alert('Tranasction.2........');
        jQuery('body').append('<h1>Added a h1 by t2</h1>');
    });
    db.transaction(function(tx) {
        alert('Transaction.3.........');
        jQuery('body').append('<h1>Added a h1 by t3</h1>');
    });

但是，当我在执行事务之前插入警报语句时。事情没有按预期进行。

例如。如果我放置一个警报('交易 t3 之前的警报');

更改后的代码如下所示:

var db = openDatabase('DBTest', "1.0", "Example DB", "200000");
    db.transaction(function(tx) {
        alert('Tranasction.1........');
        jQuery('body').append('<h1>Added a h1 by t1</h1>');
    });
    db.transaction(function(tx) {
        alert('Tranasction.2........');
        jQuery('body').append('<h1>Added a h1 by t2</h1>');
    });
    //THIS ALERT IS ADDED
    alert('An alert just before transaction t3');
    db.transaction(function(tx) {
        alert('Transaction.3.........');
        jQuery('body').append('<h1>Added a h1 by t3</h1>');
    });

更改后行为发生变化:前两笔交易不会发生。

这是预期的行为吗？如果是，那么它的合理性如何？

Answer 1

您此处的代码在 Chrome 中按预期工作。我刚刚打开开发人员工具并将代码粘贴到控制台中，可以看到所有三个事务都已创建。

请记住，db.transaction 函数调用是异步的，因此它们会立即返回，但不一定会调用您传入的回调，直到它们实际创建事务为止。

这是我认为正在发生的执行顺序:

openDatabase(...)

db.transaction #1 (begins creating transaction, returns immediately)

db.transaction #2 (begin...)

alert displays before transaction 3

db.transaction #3 (begin...)

db.transaction #1 callback (alert transaction 1)

db.transaction #2 callback (alert transaction 2)

db.transaction #3 callback (alert transaction 3)