pause until event/function is completed with jquery or javascript

Question

Is there a way to check if a function has completed its operation using either javascript or jquery?

I'm trying to make a counter that slows down as the number gets bigger(decelerating the output, if you will), using setTimeout. As you know, the larger the number the longer the delay (in setTimeout).

What I'm trying to do is click a button, then current loop iteration is printed on the screen. This loop number is used as the setTimeout delay, so while the number is low it will quickly rush through, as it gets bigger the delay is larger thus making it print the number more slowly (since this number is the delay and the larger the delay the less often it prints it).

Here is the logic I'm trying to accomplish
1. Click button
2. Initiate loop
3. trigger function to set timeout
4. set timeout triggers a function to print the loop iteration #
5. Repeat step 3 until the number of set iterations is completed

Well, as you can see when the timeout is set the loop will continue, but there will be a timeout delay. Is there any way that I can put a pause-type function that waits until the timeout function is completed, and then continue onto the next iteration?

Here is my code

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<form>
<input type="button" value="Display alert box"
onclick="setMessage()" />

<script>

 function setMessage(){
 for(i=0;i<5000;i++){
 var b = i;
 timeMsg();
//some sort of puase here checking until timeMsg & docWrite are completed, then continue to the next iteration
    }
}

function timeMsg(){
var t=setTimeout("docWrite()",b);
}   


function docWrite(){
document.write(i);
}
</script>
</form>
</body>
</html>

Jack · Accepted Answer · 2012-05-04 19:55:57Z

2

Instead of doing this in a for loop, I would recommend doing something like the following:

function docWrite(i){
    document.write(i);
}

function timeMsg(counter) {
  var t;

  counter++;
  if (counter < 5000) {
    t = setTimeout(function(counter){ 
      docWrite(counter);
      timeMsg(counter);
    }, counter, counter)    
  }
}

timeMsg(0);

edited May 4, 2012 at 19:55

answered May 4, 2012 at 19:03

Jack

9,5783 gold badges31 silver badges33 bronze badges

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

4 Comments

user1104854 Over a year ago

I thought about that, but the reason why I use a for loop is so I can pause and allow the other function to print, then continue. Can I still do that with an if statement?

Jack Over a year ago

The print happens synchronously, you don't have to wait for it. It will complete before the next line of the script is executed. The setTimeout callback function happens ansynchronously, so anything code that needs to be executed after it is completed needs to be in setTimeouts callback.

user1104854 Over a year ago

Thanks, didn't realize that. How would this be implemented into my code above? I tried to copy/paste it but didn't work. Is this because timer isn't initially set? Maybe I deleted something I shouldn't have.

Jack Over a year ago

Whoops, small mistake. Edited it and now you should be able to copy/paste to replace the code you gave in the question.

Collectives™ on Stack Overflow

pause until event/function is completed with jquery or javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related