javascript - 我可以控制 javascript/jQuery 事件触发的顺序吗？

Question

背景

我有带有网格的 asp.net Web 表单，当用户更新该网格中的文本框时，onchange 事件将启动 WebMethod 调用并更新已更改行的其余部分。当时没有保存任何内容——我们只是更新 UI。

要提交更改，请单击“保存”按钮。

这实际上在几乎所有场景下都能可靠地工作。然而，有一个非常持久的问题，我觉得我应该能够解决，但现在是时候请专家了。

问题场景

我正在使用 jQuery 捕获回车键，不幸的是该事件首先触发，导致页面在回调完成之前提交。该行未正确更新。陈旧且令人困惑的数据被保存。

更新

我认为您不能使输入行为依赖于回调，因为您可以保存而不更改行。在这种情况下，如果您不更改一行，则它永远不会保存。

现在，如果有某种方法可以检查 javascript 的内部要做的事情列表，或者创建我自己的列表，然后以某种方式管理它，那就行了。但这对于一些本来应该很容易的事情来说是一些繁重的工作。因此，除非专家告诉我其他情况，否则我必须假设这是错误的。

尝试

现在我正在使用内置的 jQuery 事件，并且我已经得到了这个精心设计的 setTimeout 来坚持尝试保存的事实，暂停足够长的时间以使 WebMethod 至少被调用，并依赖于回调进行提交。但事实证明 javascript ansychrony 并没有按照我希望的方式工作，并且 onchange 事件甚至不会触发，直到该代码块完成。这太令人惊讶了。

我想我可以使用自己的小对象以正确的顺序对这些事件进行排队，并找到一种聪明的方法来触发它，等等。

这一切似乎都是错误的方向。当然，这是疯狂的矫枉过正，这是一个常见问题，我忽略了一个简单的解决方案，因为我不使用 javascript 24/7 工作。

对吗？

代码

这就是我此刻所得到的。这显然不起作用——我试图利用 jquery 的异步特性，但所有这些显然都必须在行的 onchange 事件触发之前结束:

$(document).bind("keypress", function (e) {
    if (e.keyCode == 13) {
        handleEnter();
        return false; //apparently I should be using e.preventDefault() here. 
    }
});


function handleEnter() {
    setTimeout(function () {
        if (recalculatingRow) { //recalculatingRow is a bit managed by the onchange code.
            alert('recalculating...');
            return true; //recur
        }

        //$('input[id$="ButtonSave"]').click();
        alert('no longer recalculating. click!');
        return false;
    }, 1000);
}

典型的行如下所示。请注意，我没有使用 jquery 来绑定(bind)它:

 <input name="ctl00$MainContent$GridOrderItems$ctl02$TextOrderItemDose" type="text" value="200.00" maxlength="7" id="ctl00_MainContent_GridOrderItems_ctl02_TextOrderItemDose" onchange="recalculateOrderItemRow(this);" style="width:50px;" />

我可以发布 recalculateOrderItemRow 的代码，但它真的很长，现在的问题是它在按键后事件结束之前不会触发。

更新 Dos 根据Nick Fitzgerald (man 是一篇很酷的文章)setTimeout 的使用应该会导致它变得异步。进一步深入研究 setTimeout 和 jQuery 之间的交互，以及普通 javascript 事件和 jQuery 事件之间的交互。

Answer 1

阻止 ENTER 不应该给您带来这么多麻烦!确保您的代码中有类似的内容:

$(document).on('keydown', 'input', function(e) {
    if(e.keyCode == 13) {
       e.preventDefault();
    }
});

更新

看起来您确实想要在ENTER上保存，但前提是在change上更新UI之后。这是可能的。您可以使用上面 Matthew Blancarte 建议的标志，从 change 回调触发保存，并摆脱 setTimeout。

但我不建议这样做。 您最好仅依靠保存按钮进行保存。如果不这样做，您的用户将必须等待两个异步操作完成才能完成保存。因此，您必须阻止 UI，或跟踪所有异步操作，并根据需要中止一些操作。我认为这是不值得的，如果保存时间太长，ENTER 对于用户来说会变得不太直观。