關於javascript setTimeout異步模式

Question

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var i = 0;
        var d = 0;
        function BBB() {
            i++;
            alert("11");
            if (i <= 10)
                setTimeout("BBB()", 300);
        }
        function HHH() {
            d++;
            alert("22");
            if (d<= 10)
                setTimeout("HHH()", 300);
        }
        function CCC() {
            BBB();
            HHH();
        }
    </script>
</head>
<body>
    <input type="button" value="Submit" onclick="CCC()"/>
</body>
</html>

我想完全執行BBB功能，然后執行HHH功能。 但結果並非如此，輸出為11 22 11 11......

該如何解決？對不起我的英語不好！ 謝謝！

Answer 1

setTimeout導致這些功能無法順序執行。

您將在任何其他異步上下文中進行操作，即

將函數名稱作為回調名稱傳遞
保持全局變量以保持跟蹤
使用事件。

在您的情況下，您有一個變量i跟蹤呼叫，因此像這樣，也許：

 <script type="text/javascript">
        var i = 0;
        var d = 0;
        function BBB() {
            i++;
            alert("11");
            if (i <= 10)
                setTimeout("BBB()", 300);
            else HHH();
        }
        function HHH() {
            d++;
            alert("22");
            if (d<= 10)
                setTimeout("HHH()", 300);
        }
        function CCC() {
            BBB();
        }
    </script>

Answer 2

看到您用jquery標記了它，因此這是一種使用jQuery強大功能的漂亮方法。

var deferredObj = $.Deferred();
var counter1 = 0;  
var counter2 = 0;  
function First() {
    counter1++;
    alert("first - " + counter1);
    if (counter1 >=3) {
        deferredObj.resolve();
        return;
    }
    setTimeout(First, 300);
}

function Second() {
    counter2++;
    alert("second - " + counter2);
    if (counter2 >= 3)
        return;
    setTimeout(Second, 300);
}

First();
deferredObj.done(function(){
    Second();
});

這里的關鍵是在第一個方法完成時將延遲對象標記為“已解決”，然后jQuery知道它可以執行第二個方法。 這種方式的榮譽屬於凱文在這個答案中。

現場測試用例。

Answer 3

函數的優化版本，按其順序運行一組函數。

var runner = function(fn) {
    var counter = 10, delay = 300;
    setTimeout(function run(){
        fn[0].apply(this);
        counter--;
        counter && setTimeout(run, delay);
        !counter && fn.shift() && fn.length && runner(fn);
    }, delay);
};

您可以按以下方式使用它：

var log = function(text){
    return function(){
        console.log(text);
    };
};

runner([ log("1"), log("2"), log("3") ]);

一個真實的例子。

關於javascript setTimeout異步模式

問題描述

3 個解決方案

解決方案1
2 已采納 2014-01-01 08:45:48

解決方案2
1 2014-01-01 10:57:13

解決方案3
1 2014-01-02 11:00:04

關於javascript setTimeout異步模式

問題描述

3 個解決方案

解決方案1 2 已采納 2014-01-01 08:45:48

解決方案2 1 2014-01-01 10:57:13

解決方案3 1 2014-01-02 11:00:04

解決方案1
2 已采納 2014-01-01 08:45:48

解決方案2
1 2014-01-01 10:57:13

解決方案3
1 2014-01-02 11:00:04