run another function after preceding function has completed?

Question

if i fire up 2 functions like this:

prepare_data();
read_data();

then i guess they are running at the same time. but as you can see function two is depending on the first one, so how can i make the latter one run after the first one is completed?

i just thought they were...but its good that they dont, just like in php:) — ajsie, Dec 21 '09 at 03:18
but if you got 2 jquery event handlers on one DOM element. lets say $(a).click... which one will run first? the one above or do they run at the same time? — ajsie, Dec 21 '09 at 03:20
I believe that they will run in the order that they were added. They will not run simultaneously. — SLaks, Dec 21 '09 at 03:23
As always, the lesson here is: **try it** before you wonder what the behavior will be. — delfuego, Dec 21 '09 at 03:30
@SLaks: FYI order of event handlers is non-deterministic in all browsers today. DOM 3's `EventListenerList` is meant to address this http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-EventListenerList — Crescent Fresh, Dec 21 '09 at 03:43
@Crescent: jQuery event handlers are not DOM event handlers. I believe that they will be triggered in the `for in` traversal order of the `handlers` list. — SLaks, Dec 21 '09 at 04:05
@SLaks: "jQuery event handlers are not DOM event handlers" - That does not compute. What? — Crescent Fresh, Dec 21 '09 at 18:29
@Crescent: jQuery adds a single event handler which loops over an internal queue. It does not add each handler separately to the browser's DOM event. — SLaks, Apr 21 '10 at 00:58
@SLaks: you're right, I missed the "jquery" in the OPs comment about multiple event handlers. My comments were specifically targeted at pure `addEventListener` and `attachEvent` implementations. — Crescent Fresh, Apr 21 '10 at 03:27

score 11 · Accepted Answer · answered Dec 21 '09 at 03:15

11

Javascript, and most other languages, run code sequentially.

Therefore, they will not both run at the same time.

In fact, it is not possible to run two different pieces of Javascript code at the same time. However, in many other languages, it is possible using threads.

However, if they make AJAX calls, the corresponding server-side code called by both functions will run simultaneously.
To prevent that, you'll need to make the first function accept a callback parameter and pass it the second function.

answered Dec 21 '09 at 03:15

SLaks

868,454
176
1,908
1,964

I'd just get rid of "and most other languages" there. Way too sweeping a remark.... – Crescent Fresh Dec 21 '09 at 03:25
2

Do you disagree? Are there any languages which execute every statement in parallel? – SLaks Dec 21 '09 at 03:26
@SLaks: nice strawman comeback there ;) All I meant was the sentence is kind of non-specific and slightly mis-leading there. Your stuff about threads and callbacks is what I think you were getting at. – Crescent Fresh Dec 21 '09 at 03:37
@SLaks: I disagree! In multi treaded applications you can execute statements in parallel. In such a system this question is very valid. May be this user knows more about programming than he reveals :) – Square Rig Master Dec 21 '09 at 03:58
I'm well aware that it's possible; see my fourth sentence. However, I don't think there are any languages which have the behavior that he's expecting. (Where two ordinary sequential lines of code will run in parallel by default) – SLaks Dec 21 '09 at 04:02
2

It's possible to run two or more different pieces of JavaScript code in the same script at the same time using window.setTimeout(..) https://developer.mozilla.org/en/DOM/window.setTimeout and related functions. – John K Dec 21 '09 at 07:00
1

@jdk: no, `setTimeout` simply queues execution. JavaScript is single threaded (in the browser). By definition it cannot execute more than one statement at the exact same moment in time. – Crescent Fresh Dec 21 '09 at 11:31
@Crescent: Very true. It is a common misconception that `setTimeout` will escape the browser's UI thread; in reality, it **will not**. (And therefore, Javascript developers never need to worry about thread safety) http://stackoverflow.com/questions/1594077/jquery-synchronous-animation – SLaks Dec 21 '09 at 14:33
Note that Firefox 3.5 does support multi-threading: https://developer.mozilla.org/En/Using_web_workers, as does Google Gears: http://code.google.com/apis/gears/api_workerpool.html – SLaks Dec 21 '09 at 14:35

score 4 · Answer 2 · answered Dec 21 '09 at 03:17

I'm assuming the first call makes some kind of asynchronous call that the second relies upon because otherwise the two functions will execute sequentially.

If so you need to do the second in the callback from the first. For example, in jQuery:

function prepare_data() {
  $("#data").load("/load_data.php", function() {
    read_data();
  });
}

It's impossible to say how you should solve this without more information on whether you're using vanilla Javascript or a particular library. I'd strongly suggest using a library of some sort for AJAX however.

score 3 · Answer 3 · answered Jan 04 '14 at 19:08

May be you want to call Second function after first function function to be successfully executed, if so, then you can do this by this

$('button').click(function()
{
    function1(someVariable, function() {
       function2(someOtherVariable);
    });
});


function function1(param, callback) {
  alert('Now first function will be called.');
  callback();
}

score 2 · Answer 4 · answered Dec 21 '09 at 04:54

2

@SLaks

In fact, it is not possible to run two different pieces of Javascript code at the same time. However, in many other languages, it is possible using threads.

Is this completely correct? cant you run javascript parallely using web workers ?

http://www.w3.org/TR/2009/WD-workers-20090423/

https://developer.mozilla.org/En/Using_web_workers

answered Dec 21 '09 at 04:54

mays

347
1
3
11

In IE, it is. In Firefox, it isn't. – SLaks Dec 21 '09 at 14:36

run another function after preceding function has completed?

4 Answers4

Linked