execution order of actions

[roman]

Hi,

I would like to have two actions for one event. But I want the second
action to trigger when the first one action completes. Is it possible
to do this in javascript? I'm using the onclick event.

Thanks,
Roman

 

[web.dev]

Hi,

I would like to have two actions for one event. But I want the second
action to trigger when the first one action completes. Is it possible
to do this in javascript? I'm using the onclick event.

Thanks,
Roman

Sure it is. For example:

elem.onclick = function ()
{
myfunc_act1();
myfunc_act2();
}

As long as the first function isn't asynchronous, then it will execute
in the order provided.

 

[roman]

Would a window popup count a an asynchronous action?

I am trying to combine two actions in one event -> onclick.

Action1 -> popupwindow1; select something; bring back to parent form;
Action2 -> popupwindow2; does something and displays message; click on
window close;

Is this possible? Right now I have two buttons and the users need to
click on both. I would like to combine them.

Thanks,
Roman

Roman

 

[Lee]

roman said:

Would a window popup count a an asynchronous action?
Yes.

I am trying to combine two actions in one event -> onclick.

Action1 -> popupwindow1; select something; bring back to parent form;
Action2 -> popupwindow2; does something and displays message; click on
window close;

Is this possible? Right now I have two buttons and the users need to
click on both. I would like to combine them.

What you seem to want is for the button click that closes the first
window to cause the second window to popup.

 

[VK]

Hi,

I would like to have two actions for one event. But I want the second
action to trigger when the first one action completes. Is it possible
to do this in javascript? I'm using the onclick event.

Thanks,
Roman

JavaScript doesn't have synchronized methods per se. Multiple function
calls on the same event are just being added to the event handler's
internal hash without any guarantee of an execution order.
Say (Gesko syntacs):
obj.addEventListener('click',f1,false);
obj.addEventListener('click',f2,false);
doesn't mean at all that in case of a click function f1() will be
called first and function f2() second (it may happen just opposite).
Also there is no a build-in way to ensure that f2() will not start
until f1() is finished.

There are different tricks to emulate the <synchronized> behavior in
JavaScript. The most simple one (though not always applicable) way is
to assign the function's return value to some bogus variable:
....
var foo = f1(); // pseudo-synchronized function
foo = f2(); // pseudo-synchronized function
....
It does not matter if f1() or f2() have no return value (so <foo> will
be set to undefined). The program will still wait for that undefined
value until the function exits - which is pretty close to the
synchronized behavior.

 

[Matt Kruse]

JavaScript doesn't have synchronized methods per se.

Since javascript is not multi-threaded, the concept of a 'synchronized'
method is entirely irrelevant.

var foo = f1(); // pseudo-synchronized function
foo = f2(); // pseudo-synchronized function

Completely unnecessary.

f1();
f2();

will always be executed one after the other. There is never a chance that f2
will be executed before f1 exits.

 

[VK]

f1();
f2();

will always be executed one after the other. There is never a chance that f2
will be executed before f1 exits.

Where did you get this very... *strange* idea?

 

[Randy Webb]

VK said the following on 11/14/2005 11:23 PM:

Where did you get this very... *strange* idea?

Probably from reality.
Have you tried testing it?

function f1(){
var k = 0;
for (i=0;i<100000;i++){
k++
}
alert('finished f1()')
}

function f2(){
alert('finished f2()')
}

f1();
f2();

Which alert comes first?

But personally, if I wanted to dictate that f2() didn't execute until
f1() was finished, it would be like this:

function f1(){
//f1 code here

f2()
}

 

[VK]

VK said the following on 11/14/2005 11:23 PM:

Probably from reality.
Have you tried testing it?

function f1(){
var k = 0;
for (i=0;i<100000;i++){
k++
}
alert('finished f1()')
}

function f2(){
alert('finished f2()')
}

f1();
f2();

Waht kind of reality is that and what does it have to do with the
<synchronized> issue? Did you try:

function f1() {
f2()
}

function f2() {
// doing something quicklier
// or faster than f1
}

P.S. Just knocked on me that this is that Matt - AJAX library inventor.
I would suggest then to read asap about *piper* input / output streams
in Java - why are they, how are they implemented and how could one
mimic them in JavaScript. That would solve a great amount of the
reported/incoming instability issues.

 

[VK]

function f1() {

f2()
}

function f2() {
// doing something quicklier
// or faster than f1
}

Naturally it should be something like:

function f1() {
for (;foo<bar; foo++) {
f2();
}

function f2() {
// doing something quicklier
// or faster than f1
}

or:

function f1() {
// slow preparation of ARG
f2(ARG);
}

function f2(arg) {
// a quicklier handling of arg
// and calling callback function
f1();
}

or any other situation there a flagged piped stream is needed.
Otherwise you'll get hundreds and thusands of copies of the same
function trying to handle the same oblect (or file) and it's only a
question of time and system tolerance before it crashes.

 

[Thomas 'PointedEars' Lahn]

Did you try:

function f1() {
f2()
}

function f2() {
// doing something quicklier
// or faster than f1
}

Execution control will not return to f1() until f2() has returned (else
the return value of f2() would not be properly defined). Therefore, f2()
can only do something "quicker or faster" than f1() if properties or
methods of the AOM/DOM are involved, if that. It certainly is not a
language issue.

You would have known if you had not only read and understood the
specification and references but tested thoroughly instead of
presenting wild, unqualified assumptions on your part as the truth.
Again.


PointedEars

 

[VK]

You would have known if you had not only read and understood the

specification and references but tested thoroughly instead of
presenting wild, unqualified assumptions on your part as the truth.
Again.

<OFFTOPIC>

1. Thomas, *sometimes* you real name is Dick
2. I've shown the situation in my second post but you answered on the
first one (?)
3. Please stop making piss on each topic I participated - you are not a
dog on the walk.
4. Say something only if you have something to say - and only if it
helps to solve the OP problem.

</OFFTOPIC>

%-D

 

[Evertjan.]

VK wrote on 15 nov 2005 in comp.lang.javascript:

1. Thomas, *sometimes* you real name is Dick

Many nice people are named Dick overhere in Europe,
so,
if you want to insult someone on this international usenet forum,
please do so properly.

Better still, keep to the subjects that are on-topic.

 

[VK]

VK wrote on 15 nov 2005 in comp.lang.javascript:

Many nice people are named Dick overhere in Europe,
so,
if you want to insult someone on this international usenet forum,
please do so properly.

Better still, keep to the subjects that are on-topic.

Sorry... allowed to myself to loose my patience.

Sorry to all Dicks and even to Thomas.

Requested to remove this post from the thread (I would do it anyway).

 

[roman]

Thanks to everyone who contributed to my question.

Since a window popup count a an asynchronous action, then I don't think
I can do what I want. I tried to simulate a button click on the second
button, but this also executes too soon.

Thanks again,
Roman

 

[Lasse Reichstein Nielsen]

Where did you get this very... *strange* idea?

From experience with the execution model of quite a lot of Javascript
enabled browsers?

All these implementations are single-threaded. Execution is event
based, with each event having its code run to completion before the
next event is processed.
If two functions are called like above, exeution of the first will
end before the second is called. The f1 function might start some timers
that will later cause events that executes other code, but that's
not part of the execution of f1.

/L

 

[VK]

From experience with the execution model of quite a lot of Javascript
enabled browsers?

All these implementations are single-threaded. Execution is event
based, with each event having its code run to completion before the
next event is processed.
If two functions are called like above, exeution of the first will
end before the second is called. The f1 function might start some timers
that will later cause events that executes other code, but that's
not part of the execution of f1.

I was *wrong*. A desire to say something polemic overweighted the rule
"think, check, then post". And JavaScript is not Java (funally read the
relevant FAQ

The only right idea I managed (?) to express is that the order in which
one adds multiple event handlers via addEventListener / attachEvent -
this order doesn't define the order in which these events handlers will
be called on event.

 

[Thomas 'PointedEars' Lahn]

The only right idea I managed (?) to express is that the order in which
one adds multiple event handlers via addEventListener / attachEvent -
this order doesn't define the order in which these events handlers will
be called on event.

That is probably so with IE-proprietary attachEvent() method:

<http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp>

| If you attach multiple functions to the same event on the same object, the
| functions are called in random order, immediately after the object's event
| handler is called.

It is not so with EventTarget::addEventListener():

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Registration-interfaces>

In fact, in my Firefox 1.0.7/Linux all event listeners are always executed
in order of addition:

var o = referenceToAhtmlElementObject; /* I used _window.document.body in
the JavaScript Panel of ContextMenu Extensions */

o.addEventListener(
"click",
function() { alert(1); },
false);

o.addEventListener(
"click",
function() { alert(2); },
false);

o.addEventListener(
"click",
function() { alert(3); },
false);

Clicking the element represented by the object referenced with `o' yields
"1", then "2", then "3", as expected.

What is important with EventTarget::addEventListener() and could have led
you to believe that the execution order of event listeners added with this
method is random, is that you should not omit the third argument and that
it makes a difference if the argument is `false' (bubbling only, comes
after all event listeners for child elements and others of the target
element) or `true' (capturing only, comes before all event listeners for
child elements and bubbling).


PointedEars

 

[VK]

That is probably so with IE-proprietary attachEvent() method

Right. The test case below gives for IE 6.0 this sequence:

f2()
f3()
f1()

For FF 1.0.7 it gives the original assignment sequence:
f1()
f2()
f3()

So yes, random execution order seems to be a "feature" of attachEvent
only. But at least it's properly documented on MSDN.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script type="text/javascript">
function init() {
var obj = document.getElementById('test');
/*@cc_on
@if (@_jscript)
with (obj) {
attachEvent('onclick',f1);
attachEvent('onclick',f2);
attachEvent('onclick',f3);
}
@else @*/
with (obj) {
addEventListener('click',f1,false);
addEventListener('click',f2,false);
addEventListener('click',f3,false);
}
/*@end @*/
}

function f1() {
alert('f1');
}

function f2() {
alert('f2');
}

function f3() {
alert('f3');
}

window.onload = init;
</script>

<style type="text/css">
body {background-color: #FFFFFF}
var {font: normal 10pt Verdana, Geneva, sans-serif;
color: #0000FF; text-decoration: underline;
cursor: hand; cursorointer}
</style>

</head>

<body>

<noscript>
<p><font color="#FF0000"><b>JavaScript disabled:-</b><br>
<i><u>italized links</u></i> will not work properly</font></p>
</noscript>

<p>
<var id="test">Test</var>
</p>

</body>
</html>

 

[autigers20]

I have a problem i'm thinking might be related to execution order as
discussed in this thread. Save the code below as an html file, load it
in your browser, and click the link to run the test.

The idea is that i show a hidden DIV while a potentially long-running
function runs alerting the user that something is happening. Once the
function is done - the DIV is hidden again.

However, what happens is that the function runs - but the DIV never
displays.

But......if you un-comment out the window.alert statement - the DIV
will display.

Is this related to execution order - or something else?



<!-----test.html------>
<a href="javascript:jsFunction()">Run Test</a>

<div id="notification" style="display: none; background: black; font:
white"></div>

<script>
function jsFunction() {
document.getElementById("notification").innerHTML = "test
notification";
document.getElementById("notification").style.display = "";
//window.alert("test");
var x = 0;
while (x<2099999) {
x++;
}
document.getElementById("notification").innerHTML = ""
document.getElementById("notification").style.display = "none";
}
</script>
<!--end-->