Javascript 如何等待点击事件完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11790241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I wait for a click event to complete
提问by Jithin Jose
I add a click event handler to an element
我向一个元素添加了一个点击事件处理程序
$(".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
如何确保 code2 在 code1 执行后执行
回答by nnnnnn
(Ignoring WebWorkers) JavaScript runs on a single thread, so you can be sure that code2 will always execute after code1.
（忽略 WebWorker） JavaScript 在单线程上运行，因此您可以确定 code2 将始终在 code1 之后执行。
Unlessyour 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 调用或 a setTimeout()，在这种情况下触发的单击处理程序将完成，然后 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"
“我如何确保 code2 在 code1 执行后执行”
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 callbackparameter 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()docofor more info.)
也就是说，在点击处理程序中测试是否已在callback参数中传递了一个函数，如果是，则调用它。这意味着当事件“自然”发生时，不会有回调，但是当您以编程方式触发它并传递一个函数时，该函数将被执行。（请注意，您传递的参数.trigger()不一定是函数，它可以是任何类型的数据，您可以传递多个参数，但为此我们需要一个函数。有关更多信息，请参阅.trigger()doco。）
回答by Gautam
Wrap code2in method and add it as a callback inside code1so it will always get called after code1executes
包装code2在方法中并将其作为回调添加到内部，code1以便在code1执行后始终会被调用
code2 = function(){/*code2*/};
$(".elem").click(function(){
//code1
code2();
})
回答by SHAKIR SHABBIR
You can try writing this way:
你可以试试这样写：
$(".elem").live("click", function(){
//code1
})
// for newer jquery version from 1.9
$(".elem").on("click", function(){
//code1
})
And, your trigger will always execute as fired.
而且，您的触发器将始终在触发时执行。
回答by Ankit
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; });
无功点击=假；$('#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 。
