关于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