我该如何等待点击事件完成

I add a click event handler to an element

我向元素添加了一个click事件处理程序

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

And then I trigger a click event

然后我触发一个点击事件

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

How can i make sure that code2 executes after code1 executes

如何确保code1执行后执行code2

4 个解决方案

#1

(Ignoring WebWorkers) JavaScript runs on a single thread, so you can be sure that code2 will always execute after code1.

(忽略WebWorkers)JavaScript在单个线程上运行,因此您可以确保code2将始终在code1之后执行。

Unless your code1 does something asynchronous like an Ajax call or a setTimeout(), in which case the triggered click handler will complete, then code2 will execute, then (eventually) the callback from the Ajax call (or setTimeout(), or whatever) will run.

除非你的code1像Ajax调用或setTimeout()一样异步,在这种情况下触发的click处理程序将完成,然后code2将执行,然后(最终)从Ajax调用(或setTimeout()或其他)回调会跑。

EDIT: For your updated question, code2 will always execute before code1, because as I said above an async Ajax callback will happen later (even if the Ajax response is very fast, it won't call the callback until the current JS finishes).

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

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

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

Using .click() with no params is a shortcut to .trigger("click"), but if you actually call .trigger() explicitly you can provide additional parameters that will be passed to the handler, which lets you do this:

使用没有参数的.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
});

That is, within the click handler test whether a function has been passed in the callback parameter and if so call it. This means when the event occurs "naturally" there will be no callback, but when you trigger it programmatically and pass a function then that function will be executed. (Note that the parameter you pass with .trigger() doesn't have to be a function, it can be any type of data and you can pass more than one parameter, but for this purpose we want a function. See the .trigger() doco for more info.)

也就是说,在单击处理程序测试中是否已在回调参数中传递函数,如果是,则调用它。这意味着当事件“自然地”发生时将没有回调,但是当您以编程方式触发它并传递函数时,该函数将被执行。 (请注意,使用.trigger()传递的参数不必是函数,它可以是任何类型的数据,并且您可以传递多个参数,但为此我们需要一个函数。请参阅.trigger ()doco了解更多信息。)

Demo: http://jsfiddle.net/nnnnnn/ZbRJ7/1/

#2

You can try writing this way:

你可以尝试这样写:

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

And, your trigger will always execute as fired.

并且,您的触发器将始终执行为触发。

#3

Wrap code2 in method and add it as a callback inside code1 so it will always get called after code1 executes

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

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

#4

-2

Javascript execution is line by line. So whatever comes up, will be executed first. So adding the click code before the other method will work.

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

Plus if there is any async call, then take a flag which is set only when you get response.

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

var clicked = false; $('#elem').click(function(){ // do some async process clicked = true; });

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

while (!clicked){ // do nothing }

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

// other function to be called

//要调用的其他函数

Or the second option will be, if using post method, set async = true in property.

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

#1