使用外部等待类暂停 javascript 函数的执行

Question

我试图弄清楚如何在调用另一个函数之前暂停函数的执行，同时使我的 javascript 代码极具可读性。这是我想做的一个例子：

function main_function(){   
   function a();
   // wait for function a to finish - could take 1 second - could take 3 seconds

   function b();
   // wait for function b to finish - don't know how long this will take

   function c();
   // completed
}

我已经阅读了几十篇关于如何使用 setTimeOut、重定向到其他函数、回调等的文章，但无法找到真正有效的解决方案（而且大多数只是使用笨重的 setTimeout() ，这确实没有帮助，因为我不知道每个函数可能需要多长时间）。

所以，我终于遇到了一个名为“WaitThread.js”的小实用程序。这似乎正是我需要做的事情，而且似乎以后很容易阅读和维护。

但是，我不知道如何使用它！ :)

有人能给我提供一个如何使用这个 WaitThread.js 的例子吗？或者至少为我提供一种可读/优雅的方式来等待 javascript 函数依次执行，同时等待每个函数先完成？

这里是 WaitThread.js 页面的链接：

http://www.robertmayo.com/blog/2006/07/htmljavascript-wait-for-asynchronous.html

谢谢！

Answer 1

根据waitthread.js的解释，它只是使用一个定时器来轮询，等待某个变量值的变化。

此类问题的更典型设计模式使用回调，并且函数 a 将在工作完成时调用回调，从而启动函数 b。因此，您将一个函数传递给function a，当function a完成其工作时应该调用该函数。更完整的设计模式通常有成功退出和不成功退出的回调，甚至可能从退出传递参数，但由于我不知道你的具体情况，所以我没有尝试在这里建模。对于多步骤过程，它看起来像这样。我们假设三个异步函数作为函数 a、b 和 c 存在，并且每个函数都采用一个函数作为参数，该函数将在异步函数完成时被调用：

function main_function_step1() {
  a(main_function_step2);
}

function main_function_step2() {
  // execute code here that goes after function a, but before function b
  b(main_function_step3);
}

function main_function_step3() {
  // execute code here that goes after function b, but before function c
  c(main_function_finish);
}

function main_function_finish()
{
  // execute whatever code here to finish
}

更完整的解决方案将传递一个带有成功回调和失败回调的对象，将为每个函数至少提供一个参数，以便可以返回结果或错误条件。

在这种情况下，它看起来像这样：

function main_function_step1() {
  function main_function_a_step1_fail(err)
  {
    // handle error in step 1
  }
  var o = {success: main_function_step2, fail: main_function_a_step1_fail};
  a(o);
}

function main_function_step2(data) {
  // execute code here that goes after function a, but before function b
  function main_function_a_step2_fail(err)
  {
    // handle error in step 2
  }
  var o = {success: main_function_step3, fail: main_function_a_step2_fail};
  b(o);
}

function main_function_step3(data) {
  // execute code here that goes after function b, but before function c
  function main_function_a_step3_fail(err)
  {
    // handle error in step 3
  }
  var o = {success: main_function_finish, fail: main_function_a_step3_fail};
  c(o);
}

function main_function_finish(data)
{
  // execute whatever code here to finish
}

代码有点混乱，但它不需要轮询或全局变量。如果步骤之间没有要执行的代码，并且它们之间的逻辑完全相同，则可以参数化数据结构中的所有内容，并使用单个函数执行所有步骤，该函数仅执行数据结构中的一项并传递下一项值作为回调等等。