HTML/Javascript：多个 onClick 函数触发顺序/延迟？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16434110/
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
HTML / Javascript: multiple onClick functions firing order / delays?
提问by Brian Langhoff
a basic understanding question:
一个基本的理解问题：
Have an element with onClick action - multiple javascript calls being made:
有一个带有 onClick 动作的元素 - 进行了多个 javascript 调用：
onclick="function1();function2();function3()"
However, as function 3 is depending on the function1 action, I need to make sure the function3 is not firing untill function1 is all done. And that does not seem to be the natural order of things, in practice it seems that all 3 functions are firing more or less at the same time (at least not waiting for eachother to finish). Anyway I can achieve this?
但是，由于函数 3 取决于函数 1 的操作，因此我需要确保函数 3 不会触发，直到函数 1 全部完成。这似乎不是事物的自然顺序，实际上似乎所有 3 个函数都或多或少地同时触发（至少不会等待彼此完成）。无论如何我能做到这一点吗？
EDIT: can't do it all from same functinon call, it is (mostly) ajax calls that updates certain div's...
编辑：不能从同一个 functinon 调用中完成这一切，它（主要是）ajax 调用更新某些 div 的......
FURTHER EDIT: Okay, can see that maybe it needs even further clarification (thought there was a simple, logical way to handle it, build in so to speak)...
进一步编辑：好的，可以看到它可能需要进一步澄清（认为有一种简单、合乎逻辑的方法来处理它，可以这么说）......
The function calls are firing ajax action, which hare - thru PHP - updating content on the page (div's). If I should use a return value, then I should modify my central ajax js function so that it will return something on completion and only fire the next function if this value has been set? Anyone has a good snippet to do this in one single onClick event..? :-)
函数调用正在触发 ajax 操作，这些操作通过 PHP 来更新页面（div）上的内容。如果我应该使用返回值，那么我应该修改我的中央 ajax js 函数，以便它在完成时返回一些东西，并且只有在设置了这个值时才触发下一个函数？任何人都有一个很好的片段可以在一个 onClick 事件中做到这一点..？:-)
OR ... as something af a hack - should I just stick a 1 second delay in front of function3? :-) How would I go about that directly inside the onClick event..? :-)
或者......作为一个黑客 - 我应该在function3前面延迟1秒吗？:-) 我将如何直接在 onClick 事件中进行处理..？:-)
采纳答案by sandesh kota
If you do not want to change the onclick definition, then you can do it like this:
如果您不想更改 onclick 定义，那么您可以这样做：
onclick="function1();function2();function3();"
Script:
脚本：
function1Complete = false;
function1(){
// some stuff
function1Complete = true;
}
function3(){
if (function1Complete){
// Put your code here
}else{
setTimeout(function3, 1000);
}
}
This is not the best and Clean solution. But this will help you, if you do not have any other solution.
这不是最好的和干净的解决方案。但是，如果您没有任何其他解决方案，这将对您有所帮助。
回答by Zim84
You can work with callbacks:
您可以使用回调：
function function1(callback) {
// do your stuff
if (callback) { callback(); } // calls your next function
}
function function2(callback) {
// do your stuff
if (callback) { callback(); } // calls your next function
}
function function3() {
// function 3 stuff
}
if you depend on a setTimeoutto finish, simply add your call to the callback in your setTimeoutpart.
如果您依赖于setTimeout完成，只需将您的呼叫添加到您的setTimeout部分中的回调。
and call it like this:
并这样称呼它：
<a onclick="function1(function() { function2( function() { function3() }) });">call functions</a>
回答by Ankit Khedekar
instead for calling all there functions directly onClick you should try calling one function from another
相反，为了直接在 onClick 上调用所有函数，您应该尝试从另一个函数调用一个函数
something like this:
像这样：
onClick="function1()"
and then from funtion1() call funtion2()
然后从 funtion1() 调用 funtion2()
function function1()
{
//your code here
funtion2();
}
and so on....
等等....
