如何等待點擊事件完成

Question

我向一個元素添加了一個點擊事件處理程序

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

然后我觸發一個點擊事件

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

如何確保 code2 在 code1 執行后執行

Answer 1

（忽略 WebWorker） JavaScript 在單線程上運行，因此您可以確定 code2 將始終在 code1 之后執行。

除非您的 code1 執行一些異步操作，例如 Ajax 調用或setTimeout() ，在這種情況下觸發的單擊處理程序將完成，然后 code2 將執行，然后（最終）來自 Ajax 調用的回調（或setTimeout() ，或其他）會跑。

編輯：對於您更新的問題，code2 將始終在 code1 之前執行，因為正如我上面所說的，異步 Ajax 回調將稍后發生（即使 Ajax 響應非常快，它也不會在當前 JS 完成之前調用回調）。

“我如何確保 code2 在 code1 執行后執行”

使用不帶參數的.trigger("click") .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/

Answer 2

裹code2在方法並將其添加為內回調code1所以它總是會得到之后調用code1執行

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

Answer 3

你可以試試這樣寫：

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

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

而且，您的觸發器將始終在觸發時執行。

Answer 4

Javascript 是逐行執行的。 所以無論發生什么，都會先執行。 因此，在其他方法起作用之前添加點擊代碼。

另外，如果有任何異步調用，則取一個僅在您收到響應時設置的標志。

無功點擊=假； $('#elem').click(function(){ // 做一些異步處理 clicked = true; });

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

// 要調用的其他函數

或者第二個選項是，如果使用 post 方法，在屬性中設置 async = true 。