HTML/Javascript：多个onClick函数触发顺序/延迟？

一个基本的理解问题：

具有具有onClick操作的元素-正在进行多个javascript调用：

onclick="function1();function2();function3()"

但是，由于功能3取决于功能1操作，我需要确保在功能1全部完成之前功能3不会触发。这似乎不是事情的自然顺序，在实践中，似乎所有3个函数都或多或少同时启动（至少不等待彼此完成）。无论如何，我能做到这一点吗

编辑：不能从同一个functinon调用中完成所有操作，更新某些div的是（大部分）ajax调用

进一步编辑：好的，可以看出可能需要进一步的澄清（虽然有一个简单、合乎逻辑的方法来处理它，可以说是内置的）

函数调用触发ajax操作，该操作通过PHP更新页面上的内容（div）。如果我应该使用一个返回值，那么我应该修改我的中心ajaxjs函数，以便它在完成时返回一些东西，并且只有在设置了这个值的情况下才触发下一个函数？任何人都可以在一个onClick事件中使用一个很好的代码片段来完成这项工作….？：-）

---

或者。。。作为一个黑客，我应该在函数3前面加上1秒的延迟吗？：-）我将如何直接在onClick事件中进行此操作…？：-）

如果要在单击时直接调用所有函数，您应该尝试从一个函数调用另一个函数

大概是这样的：

onClick="function1()"

<a onclick="function1(function() { function2( function() { function3() }) });">call functions</a>

onclick="function1();function2();function3();"

然后从Function1（）调用Function2（）

---

等等

您可以使用回调：

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
}

如果依赖于

setTimeout

完成，只需将调用添加到

setTimeout

部分中的回调中即可

这样称呼它：

onClick="function1()"

<a onclick="function1(function() { function2( function() { function3() }) });">call functions</a>

onclick="function1();function2();function3();"

调用函数

如果您不想更改onclick定义，则可以这样做：

onClick="function1()"

<a onclick="function1(function() { function2( function() { function3() }) });">call functions</a>

onclick="function1();function2();function3();"

脚本：

function1Complete = false;

function1(){
// some stuff
function1Complete = true;
}

function3(){
  if (function1Complete){
    // Put your code here
  }else{
    setTimeout(function3, 1000);
  }
}

---

这不是最好、干净的解决方案。但是，如果您没有其他解决方案，这将对您有所帮助。

为什么不将所有函数聚合到一个函数中？使用该代码，每个函数将依次调用。在前一个函数完成之前，不会调用任何函数。函数可能会在以后执行某些操作（例如，如果它调用

setTimeout

或设置事件处理程序，但没有通用的方法来捕获该操作。您必须编写一个回调函数，使其在以后运行代码）。也许我应该指定（感谢所有已经回答的人）-function1对数据库进行了一些更新，并更新了一个div（ajax）。。。function3（当然都是seudo示例）更新另一个div，这取决于function1的db操作。在实例中，我可以看到function3在function1进行更新之前更新了div……您的数据库是否已复制或负载过重？我建议您查看下面我的答案。修改：调用你的

function2（）在ajax调用中。如果使用jQuery，请使用
success
属性/事件并将该调用放在其中。仅将函数调用粘贴在上一个函数的末尾不会有任何区别。如果
function1
调用了
setTimeout
（例如），则在
setTimeout
调用的函数末尾调用
function2
将，但是我们不知道是否正在使用
setTimeout
，或者是否正在使用其他东西，或者OP是否只是误解了他得到的结果。对于我的解决方案，我想我需要function2在function1之后运行..但是我想哦..我还有一些调用function1的东西没有运行function2..所以问题是，这个特定的onClick可能是唯一一个需要运行这些特定函数的地方。如果此参数为
true
（具有值），则运行函数2，否则函数1结束。这对我起了作用！Zim84答案中的回调内容看起来太混乱了，我不喜欢
超时的想法。这将调用函数3，然后调用函数2，然后调用函数3返回的任何函数，然后调用函数1，然后调用函数2返回的任何函数。回调如果正确实现，可能是问题解决方案的一部分。但目前问题中没有足够的代码来说明问题所在。问题的严重性和推测性。我同意，但他要求解决问题“如何通过HTML元素的onclick事件依次启动3个函数”，这是一个可行的解决方案。如果问题更具体，我们可以提供一个很好的解决方案。问题中的代码本身也是一个可行的解决方案它不够具体（编辑得更清楚），无法确定问题到底是什么，这就是为什么我发表了评论，而不是试图回答它。好吧，这难道不能确保function3的内容永远不会运行，或多或少…？：-）@只要函数1完成并正确设置标志，BrianLanghoff就不会出现。它确保函数3在函数1完成之前不能运行，这似乎是您所追求的行为。谢谢，最终在我的javascript ajax例程中实现了类似于您的建议的内容-并且实现了以下技巧：-）