Ive searched a lot of places for the answer to this seemingly simple problem, but Ive only found rather complicated answers involving classes, event handlers and callbacks (which seem to me to be a somewhat sledgehammer approach). I think callbacks may be useful but I cant seem to apply these in the simplest context. See this example:
<html>
<head>
<script type="text/javascript">
function myfunction()
{
longfunctionfirst();
shortfunctionsecond();
}
function longfunctionfirst()
{
setTimeout('alert("first function finished");',3000);
}
function shortfunctionsecond()
{
setTimeout('alert("second function finished");',200);
}
</script>
</head>
<body>
<a href="#" onclick="javascript:myfunction();return false;">Call my function</a>
</body>
</html>
In this, the second function completes before the first function; what is the simplest way (or is there one?) to force the second function to delay execution until the first function is complete?
Many thanks in advance. Tom
---Edit---
Thanks for all the replies so quickly!
So that was a rubbish example but thanks to David Hedlund I see with this new example that it is indeed synchronous (along with crashing my browser in the test process!):
<html>
<head>
<script type="text/javascript">
function myfunction()
{
longfunctionfirst();
shortfunctionsecond();
}
function longfunctionfirst()
{
var j = 10000;
for (var i=0; i<j; i++)
{
document.body.innerHTML += i;
}
alert("first function finished");
}
function shortfunctionsecond()
{
var j = 10;
for (var i=0; i<j; i++)
{
document.body.innerHTML += i;
}
alert("second function finished");
}
</script>
</head>
<body>
<a href="#" onclick="javascript:myfunction();return false;">Call my function</a>
</body>
</html>
As my ACTUAL issue was with jquery and IE I will have to post a separate question about that if I cant get anywhere myself!