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的解释，它只是使用一个计时器来轮询，等待某个变量值的变化。

此类问题的典型设计模式使用回调，function a会在完成工作后调用回调function 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
}

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

使用External Wait类暂停执行javascript函数

1 个答案: