jQuery 条件队列事件

Question

我有 2 个函数（“编辑”和“保存”），它们是分别绑定到单击和模糊表格单元格事件的事件处理程序。 基本上“编辑”用具有相同内容的输入替换单元格的内容，并保存相反，两者都使用一些 ajax 调用来更新数据库。

这很好用。问题是现在我想“链接” 2 个单元格，所以当我更改第一个单元格的值时，第二个单元格会根据第一个单元格的值进行更新。

这几乎可以工作，除了在一种情况下：假设我编辑单元格#1，对值进行一些更改，然后单击第二个。 发生的情况是在 cell#1 上触发了 blur 事件，调用了“save”函数，这使得第一个 cell 恢复到具有新值的正常状态，同时也改变了 cell#2 的值。

但是在单元格#2 上也触发了点击事件，因为我只是点击了它，所以在“保存”完成并完成对单元格#2 的更改之前，调用了“编辑”并开始处理。

我想要的是单元格#2 上的“编辑”在开始之前等待保存完成，因此它将具有正确的值。

我阅读了一些关于在 JS 等中同步事件的内容......但到目前为止我还没有成功地将其应用于我的问题。

谁能帮帮我？

谢谢

Answer 1

对于每个“编辑”操作，您可能应该应用一个前提条件，该前提条件要求之前的“保存”操作（如果有的话）是完整的。

例如：

$('...').click(function() {

    // precondition
    if(saveInProgress) return false;

    // .. you code to switch to edit mode ...

});

$('...').blur(function() {

    // precondition
    if(saveInProgress) return false;

    // AJAX call for saving
    doSave();

});

var saveInProgress = false;
function doSave() {

    saveInProgress = true;
    $.ajax(...,
        success: function() {
            // ... your code ...
            saveInProgress = false;
        },
        error: function() {
            // ... your code ...
            saveInProgress = false;
        }
    );
}