Menu
I've 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?
---Edit---
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 can't get anywhere myself!
347
By default, JavaScript runs in a single process – in both web browsers and Node. js. The so-called event loop sequentially executes tasks (pieces of code) inside that process.
JavaScript is synchronous. This means that it will execute your code block by order after hoisting. Before the code executes, var and function declarations are “hoisted” to the top of their scope.
If we have three synchronous functions, we can execute them asynchronously using the setTimeout function. setTimeout(doSomething, 10); setTimeout(doSomethingElse, 10); setTimeout(doSomethingUsefulThisTime, 10);
Well, setTimeout, per its definition, will not hold up the thread. This is desirable, because if it did, it'd freeze the entire UI for the time it was waiting. if you really need to use setTimeout, then you should be using callback functions:
function myfunction() { longfunctionfirst(shortfunctionsecond); } function longfunctionfirst(callback) { setTimeout(function() { alert('first function finished'); if(typeof callback == 'function') callback(); }, 3000); }; function shortfunctionsecond() { setTimeout('alert("second function finished");', 200); }; If you are not using setTimeout, but are just having functions that execute for very long, and were using setTimeout to simulate that, then your functions would actually be synchronous, and you would not have this problem at all. It should be noted, though, that AJAX requests are asynchronous, and will, just as setTimeout, not hold up the UI thread until it has finished. With AJAX, as with setTimeout, you'll have to work with callbacks.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
