Javascript + Run a function for X seconds

Question

Is there any way to run my function within 5 seconds in Javascript?

For example if I have Function A and Function B. I want to run Function A for 5 seconds, just after it, it will run Function B.

IF Function A only takes 1 second to finish the process, then it only need to wait another 4 seconds.
But if Function A takes 3 seconds to finish, then it would need another 2 seconds to wait, before processing Function B
IF Function A takes more than 5 seconds, then B needs to wait until A finish its job, until it can start its job. (edited)

Right now, im using Sleep Function that I found not long time ago

function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}

wait(5000);

But with this code, it will need to wait for 5 seconds no matter how much time Function A needs to finish its process.

EDIT

Function A does an AJAX POST call. which makes it takes different time to finish its job.

This question is different from What is the JavaScript version of sleep()? because :

this is going to be used in IE which doesn't support promise (as I read)
If I use settimeout, and A takes longer than 5 seconds, then B will fire it function first without waiting A to finish.

Is FunctionA performing asynchronous work? Or does it take 1 second for other reasons? — casraf, Sep 08 '16 at 07:17
setTimeout, setInterval, $evalAsync, $applyAsync, web workers can do the job — Anatoli Klamer, Sep 08 '16 at 07:19
@casraf @Juhana `Function A` is Ajax `POST` call, which makes it finish the job in different time, depends on the process. — Mark, Sep 08 '16 at 07:22
P.S., there are polyfills to implement missing features in missing browsers - newer IE don't need this usually, but for Promises+old IE, you can find a promise polyfill online — casraf, Sep 08 '16 at 13:19

casraf · Accepted Answer · 2016-09-08T13:15:15.840

3

I see these easiest approaches to this:

If Function A is asynchronous (e.g. sending an AJAX request and waiting for reply), simply use setTimeout, as the request will be done in the background and not freeze the main process. So funcA() will be immediately done running on the UI thread, then the next expression will immediately take place, (which waits for 5 seconds), then the callback from the AJAX response will be called whenever it's done fetching the response.
```
funcA();
setTimeout(funcB, 5000);
```

If Function A takes up to 5 seconds for other reasons, and you need the wait to be more dynamic, you could probably time it and subtract:

var startTime = new Date().getTime(), endTime;
funcA();
endTime = new Date().getTime();
setTimeout(funcB, 5000 - (endTime - startTime));

If Function A might take longer than 5 seconds, and Function B needs to wait for it, I suggest something similar to this:

function funcA() {
  var startTime = new Date().getTime(), endTime;
  // ... code ...
  $.post(..., {
    ...,
    // when done/resolved the AJAX request ->
    success: function(response) {
      endTime = new Date().getTime();
      setTimeout(funcB, 5000 - (startTime - endTime));
    }
  });
}

edited Sep 08 '16 at 13:15

answered Sep 08 '16 at 07:21

casraf

21,085
9
56
91

What if `funcA` takes 5001(or more) milliseconds to finish? `waitTime = 5000 - (endTime - startTime); if(waitTime < 0) { waitTime = 0; }` – aifrim Sep 08 '16 at 07:23
@aifrim Not necessary, because a negative timeout is automatically converted to the minimum. – JJJ Sep 08 '16 at 07:24
what would happen if I use the first approach, but then FunctionA takes more than 5 seconds to finish. Would Func B do its job first without waiting the reply from FunctionA? – Mark Sep 08 '16 at 07:31
Yes, it will. If you really wanna get that deep into it, you can use some sort of condition that reflects if the task has been done, and try again every few milliseconds until that response is correct. – casraf Sep 08 '16 at 07:32
Though honestly, why don't you just use a promise and wait for the first response to finish? Why specifically 5 seconds? – casraf Sep 08 '16 at 07:32
@mark it would run after A finishes + 5 seconds. Because A does async stuff. – aifrim Sep 08 '16 at 07:32
1

@alfrim no, if it performs async stuff, it literally will not wait for it to finish before proceeding with the task. – casraf Sep 08 '16 at 07:33
@casraf because im showing a real time data project. The project will show the last 5 seconds of data. Then after 5 seconds, it will keep updating the data. So Function B needs to be done right 5 seconds after A to make it looked smoothly. But if A takes longer than 5 seconds, then B still need to wait A, else the 'updated data' will be shown before the 'first data' – Mark Sep 08 '16 at 07:41
Check my update - 3rd bullet - should be what you need more or less – casraf Sep 08 '16 at 13:15

Javascript + Run a function for X seconds

1 Answers1