javascript - 如何等待点击事件完成

Question

我给一个元素添加了一个点击事件处理器

 $(".elem").click(function(){
       $.post("page.php".function(){
         //code1
      })
 })

然后触发点击事件

$(".elem").click();
//code2

如何确保code2在code1执行后执行

Answer 1

(忽略 WebWorkers)JavaScript 在单线程上运行，因此您可以确定 code2 总是在 code1 之后执行。

除非您的 code1 执行一些异步操作，例如 Ajax 调用或 setTimeout()，在这种情况下，触发的点击处理程序将完成，然后 code2 将执行，然后 (最终)来自 Ajax 调用(或 setTimeout() 或其他)的回调将运行。

编辑:对于您更新的问题，code2 将始终在 code1 之前执行，因为正如我上面所说，异步 Ajax 回调将在稍后发生(即使 Ajax 响应非常快，它也不会调用回调直到当前 JS 完成)。

"How i make sure that code2 executes after code1 executes"

使用不带参数的 .click() 是 .trigger("click") 的快捷方式，但如果您实际调用 .trigger() 明确地，您可以提供将传递给处理程序的附加参数，这样您就可以这样做:

$(".elem").click(function(e, callback) {
    $.post("page.php".function(){
      //code1

      if (typeof callback === "function")
         callback();
   });
});

$(".elem").trigger("click", function() {
    // code 2 here
});

也就是说，在点击处理程序中测试是否在 callback 参数中传递了一个函数，如果是则调用它。这意味着当事件“自然”发生时，不会有回调，但是当您以编程方式触发它并传递一个函数时，该函数将被执行。 (请注意，您通过 .trigger() 传递的参数不一定是函数，它可以是任何类型的数据，您可以传递多个参数，但为此我们希望一个函数。有关更多信息，请参阅 .trigger() doco。)

演示:http://jsfiddle.net/nnnnnn/ZbRJ7/1/