pause script until function is complete - jquery

Question

I have a simple count function increments a number into an input field. This works exactly how I would like it to work. The only problem is, is that i have a long JS script with multiple function and I only want the script to continue runnning when the count() function is complete.

JSFIDDLE http://jsfiddle.net/vyN6V/243/

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item)
        }, 0.1);
    }
}

count($(".input"));

// the rest of the script should only run when the above function has completed

$('span').text('code here should only run when function count is complete');

FYI, delay parameter of setTimeout is only an integer, not a float number, though, you could ommit it — A. Wolff
– A. Wolff, Commented Feb 24, 2014 at 17:56

Tobia · Accepted Answer · 2014-02-24 17:50:57Z

3

What you need is a callback. I'm sure you have used callbacks, for example in jQuery.

Here is how to add it to your code:

function count(Item, Callback) {    // new argument
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item, Callback)   // pass it in recursive calls 
        }, 0.1);
    } else {
        Callback();                 // call it at the end of the loop
    }
}

count($(".input"), function() {     // write the callback code here
    // this will be executed after the counts
});

answered Feb 24, 2014 at 17:50

Tobia

19.1k7 gold badges84 silver badges101 bronze badges

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

1 Comment

user1320260 Over a year ago

This seems to be it, just testing with my script - never thought of call back.

Matt Pileggi · Accepted Answer · 2014-02-24 17:50:46Z

0

setTimeout by design runs asynchronously so just by calling it you are allowing your code to continue processing and come back to the setTimeout code when it's ready (it decides when, not you).

In order to do this in JavaScript you need to encapsulate the rest of your code in a function that you don't invoke until the count function is done.

May I ask why you are using setTimeout in this fashion? It seems like what you want is actually a synchronous function so why not simply use a normal while statement in your count() function?

answered Feb 24, 2014 at 17:50

Matt Pileggi

7,2364 gold badges19 silver badges20 bronze badges

1 Comment

Aamir Afridi Over a year ago

The only reason is that he might want to animate the number being changed.

Aamir Afridi · Accepted Answer · 2014-02-24 17:53:03Z

0

Try this: http://jsfiddle.net/aamir/vyN6V/248/

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item)
        }, 0.1);
    } else {
        callback();
    }
}

count($(".input"));

function callback() {
    $('span').text('code here should only run when function count is complete');
}

answered Feb 24, 2014 at 17:53

Aamir Afridi

6,4313 gold badges44 silver badges42 bronze badges

Comments

Nico · Accepted Answer · 2014-02-24 17:53:10Z

0

If you can remove the asynch call :

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    while(current <= number){
        Item.val(aValue += 1);
        current = aValue;

    }
}

count($(".input"));

answered Feb 24, 2014 at 17:53

Nico

7,0435 gold badges27 silver badges35 bronze badges

Comments

user3290356 · Accepted Answer · 2014-02-24 17:56:09Z

0

 var number = 1500;
    var aValue = 300;
     function count(Item) {
            var current = aValue;
            Item.val(aValue += 1);
            if (current < number) {
                setTimeout(function () {
                    count(Item)
                }, 0.1);
            }
            if (current == number) {
                $('span').text('code here should only run when function count is complete');
            }
        }

        count($(".input"));

answered Feb 24, 2014 at 17:56

user3290356

951 silver badge10 bronze badges

Comments

Suman Bogati · Accepted Answer · 2014-02-24 17:58:12Z

0

There is the need of asynchronous handling, invoke the callback function restFunctionCalled() when you need it. something like this.

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item)
        }, 0.1);
    }else{
        restFunctionCalled(); //invoke the callback function from here.
    }
}

count($(".input"));

function  restFunctionCalled(){
     $('span').text('code here should only run when function count is complete');
}

DEMO

edited Feb 24, 2014 at 17:58

answered Feb 24, 2014 at 17:52

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Comments

Paulo Lima · Accepted Answer · 2014-02-24 18:00:40Z

0

There are two options for you simulate sleep or encapsulate the rest of the code and call you when your function is finished(being more advisable the second option.).

function sleep(milliSeconds){
var startTime = new Date().getTime(); // get the current time
while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

or

function callFunction(){
   $('span').text('code here should only run when function count is complete');
}

if (current < number) {
    setTimeout(function () {
        count(Item)
    }, 0.1);
}
else{
   callFunction()
}

answered Feb 24, 2014 at 18:00

Paulo Lima

1,2388 silver badges8 bronze badges

Collectives™ on Stack Overflow

pause script until function is complete - jquery

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related