About javascript setTimeout asynchronous mode

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>

I would like to execute BBB function completely,then HHH function. But the result is not so.The output is 11 22 11 11......

How to solve this?Sorry for my poor english! Thanks!

loxxy · Accepted Answer · 2014-01-01 08:45:48Z

1

setTimeout causes the functions to not be sequentially executed.

You would do what you do in any other asynchronous context ie

Pass the function names as callback names
Keep a global variable to keep track
Use events.

In your case you have a variable i keeping track of the calls & hence Like this, perhaps :

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

answered Jan 1, 2014 at 8:45

loxxy

13.2k2 gold badges28 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexander Over a year ago

The real important fix was on CCC though

loxxy Over a year ago

Yea, But I'm hoping OP would pay less attention to fix, & more to the problem.

user441222 Over a year ago

@Alexander How to do?

Community · Accepted Answer · 2017-05-23 10:32:20Z

1

Saw you tagged this with jquery so here is a prettty elegant way to do this using the power of 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();
});

The key here is marking the deferred object as "resolved" when first method finish, then jQuery knows it can execute the second method. Credits for this way belong to Kevin in this answer.

Live test case.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jan 1, 2014 at 10:57

user447356

4 Comments

Alexander Over a year ago

@user441222, I beg to disagree. There's too much overhead going on here. Better would be something like these. The runner function receives an array of functions to execute and their order which is easily extensible. I'd probably make it an answer if OP is alive

user441222 Over a year ago

@Alexander you are my star! Thank you!

user447356 Over a year ago

@Alexander not really sure why not post it as answer? Looking good enough. :-)

Alexander Over a year ago

@user441222, np, i posted it as an answer for the record :)

Alexander · Accepted Answer · 2014-01-02 11:00:04Z

0

An optimized version of a function that runs a set of functions in their order.

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);
};

You can use it as follows:

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

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

A live example.

answered Jan 2, 2014 at 11:00

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

Collectives™ on Stack Overflow

About javascript setTimeout asynchronous mode

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related