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

Question

我将单击事件处理程序添加到元素

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

然后我触发一个点击事件

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

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

Answer 1

（忽略 WebWorkers）JavaScript 在单线程上运行，因此您可以确定 code2 将始终在 code1 之后执行。

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

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

“我如何确保 code2 在 code1 执行后执行”

不带参数使用.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()文档。）

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

Answer 2

你可以试试这样写：

 $(".elem").live("click", function(){
  //code1
 })

 // for newer jquery version from 1.9
 $(".elem").on("click", function(){
  //code1
 })

而且，您的触发器将始终按触发方式执行。

Answer 3

包装code2方法并将其作为回调添加到内部，以便在执行code1后始终调用它code1

code2 = function(){/*code2*/};
$(".elem").click(function(){
  //code1
  code2();
 })

Answer 4

Javascript 执行是逐行的。所以无论出现什么，都会先执行。因此，在其他方法之前添加点击代码将起作用。

另外，如果有任何异步调用，则使用仅在收到响应时设置的标志。

var clicked = false; $('#elem').click(function(){ // 做一些异步进程 clicked = true; });

while (!clicked){ // 什么都不做 }

// 其他要调用的函数

或者第二个选项是，如果使用 post 方法，在属性中设置 async = true。