2

This is an issue with Javascript executing linearly on a single thread.

using 

  setTimeout(function(){},time);

is evaluated and executing the function() immediately.

I am looking for a method to execute function() in x seconds, for example after the dom has been updated from an ajax call.

How is this done?

In other words just need to 'pause' the script and then let it know when to execute.

for clarity if you did something like this inside the function();

      var a= document.getElementbyId("anid").innerHTML;

var a will be gathered at time setInterval is processed and not in x seconds when the function is executed.

Thanks...

John
  • 346
  • 1
  • 9
  • 19
  • 1
    No. That will execute the function after the number of milliseconds specified in `time` (assuming `time` contains a Number), not immediately. – Quentin Nov 13 '11 at 11:49

2 Answers2

5

Your example with setTimeout would not execute the function immediately, but after waiting the number of milliseconds specified by 'time'. For example, to show an alert in 3 seconds:

window.setTimeout ( function() { alert ('Test'); }, 3000);

Note that even if you use 0 as time value, the execution of the function is still delayed until the current Javascript execution stack ends, which is useful under certain circumstances but not in your case.

As said by santiagoIT, you should never rely on this kind of strategy to perform any action that depends on a particular AJAX call having completed. Instead, you should use callback functions. This is because when using timers, DOM could still be not ready at the time your function executes (for example if the computer is running slow), this threading problem is known in Computer Science as "Race Condition".

To avoid race conditions, use callback functions. An example using the jQuery library would look like:

$.get("/url/ajax/getSomething", parameterArray, callbackFunction);

function callbackFunction(data) {
    // in this example, 'data' contains the response object
    // see each function doc to find their callback arguments
    alert ('Work with DOM here');
}
jjmontes
  • 24,679
  • 4
  • 39
  • 51
2

It is better that you execute your function after the ajax call finishes. You can register a success/failure function that will get called once the call finishes. That is the right way to do it.

Here is an example with jquery:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    // here you do whatever you want after ajax is finished
  }
});

** EDIT ** Removed the suggestion to pass the callback function as a string based on Quentin's comments below, as it is indeed not a good practice.

santiagoIT
  • 9,411
  • 6
  • 46
  • 57
  • 3
    **Never** pass a string to `setTimeout`, it is slow and hard to debug, passing a function is the correct approach and should not result in the behaviour described in the question. Also, if you pass a string, then it needs to be an expression, not the name of a function (OK, so the name of a function is an expression, it just isn't useful in that context). – Quentin Nov 13 '11 at 11:48
  • @Quentin thx good to know.All examples I had seen were passing a string. I edited my answer to include the () to make it clearer – santiagoIT Nov 13 '11 at 12:46
  • Now it will work (well, it will if `functionYouWishToCall` is a global) and just be slow, inefficient and hard to debug. – Quentin Nov 13 '11 at 14:27