使用外部等待類來暫停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的解釋，它只是使用一個計時器來輪詢，等待某個變量值的變化。

這種類型的問題的更典型的設計模式使用回調和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 
} 

這是一個有點雜亂的代碼，但它不需要輪詢或全局變量。如果在這些步驟之間沒有執行代碼並且它們之間的邏輯完全相同，那麼可以在數據結構中參數化所有內容，並使用一個函數執行所有步驟，該函數僅執行數據結構中的一個項目，並傳遞下一個值作爲回調等。