Question

function add(one, two, three) {
  db.transaction(function (tx) {
    tx.executeSql('INSERT INTO results (one, two, three) VALUES (?,?,?)', [one, two, three]);
    }), function () {
         console.log('add transaction ok');
    });
}

$('#add').click(function () {
  $("tr.row").each(function () {
    var one = $(this).find("input.one").val();
    var two = $(this).find("input.two").val();
    var three = $(this).find("input.three").val();
    add(one, two, three);
  });

  alert("Done");
});

嗨，我正在尝试单击一个按钮，该按钮将在表的每一行中找到输入值并将这些值插入数据库。表行的数量有时可能会有3次，也许是10次。

我已经使用jquery .each函数来调用异步函数。整个过程都有效。我现在要做的是当.each（）函数完成后发出警报（）。使用代码，我首先收到警报，然后控制台日志，交易是好的，但我想最后得到警报。

理想情况下，我想直接转到另一个页面而不是警报，但如果事务没有先完成，我就不能。

我已查看此链接https://salesforce.stackexchange.com/questions/12424/wait-for-each-contained-async-calls-to-complete-before-redirect中提供的以下解决方案。实现此警报是立即进行的，甚至没有启动交易呼叫。

Answer 1

首先 - 我不确定你应该从客户端编写SQL。应该将包含要添加的值的ajax请求发送到服务器，然后服务器应该更新数据库，这样就没有人可以破解您的查询。所以你已被警告过了。但是这里是如何在客户端中执行此操作：

更新数据库是一项异步任务。您需要提供回调或返回承诺，以便在更新完成时收到通知：

function add(one, two, three) {
  return new Promise(function (resolve, reject) {
    db.transaction(function (tx) {
      tx.executeSql('INSERT INTO results (one, two, three) VALUES (?,?,?)', [one, two, three]);
    }, function (res) {
      resolve(res);
    });
  });
}

$('#add').click(function () {
  $("tr.row").each(function () {
    var one = $(this).find("input.one").val();
    var two = $(this).find("input.two").val();
    var three = $(this).find("input.three").val();
    add(one, two, three).then(function (result) {
        alert(result);
    });
  });
});

我不确定db.transation如何处理失败，但您需要在那里调用reject处理程序（例如reject(err)）。

编辑：如果您想等待所有行更新而不是在响应时对它们做出反应，您可能需要考虑使用Promise.all（这可能适用于您的用例，也可能不适合您的用例））

$('#add').click(function () {
    var promiseList = $('tr.row').map(function () {
        var $this = $(this);
        var one = $this.find('input.one').val();
        var two = $this.find('input.two').val();
        var three = $this.find('input.three').val();

        return add(one, two, three);
    });

    Promise.all(promiseList).then(function (resultRows) {
        resultRows.forEach(function (rowTransactionResult, index) {
            // do something with each result
        });
    })
});

Answer 2

您可以使用承诺来管理异步任务。

function add(one, two, three) {
  return new Promise(function(resolve, reject) {
    try {
      setTimeout(function() { resolve([one, two, three]) }, 2000);
    } catch (e) {
      reject('oops!');
    }
  });
}

$('.button').on('click', function() {
  add(1, 2, 3).then(function(res) {
    alert(res);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click me!</button>

等待.each＆amp;包含数据库更新，然后重定向

2 个答案: