Javascript, pause/resume window.load event

Question

I have an unusual problem that is beyond my client side skill set. I have an html page with two consecutive script tags in the body. Both script tags fire an ajax request to retrieve content and then put it in the DOM. I control the first script tag, and I don't have any control or knowledge about the second script tag. I just know it makes an ajax call and put stuff in the DOM. I also know that my tag is first.

I want my script tag to fire immediately and pause/stop the second tag. Then, contingent on what my ajax returns, I may choose to execute the second script tag. How do I do this?

I wrote a fiddle demonstrating my problem. I substituted settimeout 's for ajax calls and Math.random for my decision. Note that the settimeout duration for the first one (my one) is very long, 3 seconds, and the duration for the second one (the one I don't control is very short, .5 seconds. What's happening now is that they are both running immediately. The second message comes in at .5 seconds, and the message from the first comes in at 3 seconds 50% of the time.

I want the first script to run, wait 3 seconds, make a decision and either print the first message immediately, or call the second script which would wait an additional .5 seconds to print the second message. I should never see both messages at the same time, and I should never see the second message before 3.5 seconds.

Again, I don't know any knowledge over the contents of script two. You could easily hide id= ext_div in this case, but I don't know what that id is. That is not the answer I want. I was thinking about grabbing the event on the first script and doing something to that, stopPropagation or something like that at the TODO1 comment. But that doesn't work. Event if it did, I would need a resumePropgation function which I don't event think exists.

Answer 1

I want my script tag to fire immediately and pause/stop the second tag. Then, contingent on what my ajax returns, I may choose to execute the second script tag. How do I do this?

The only way to make that happen is to make your ajax call synchronous, eg, pass false as the third argument to XMLHttpRequest#open (or whatever the equivalent is in the library you're using, if you're using one). There are several reasons why this is a bad idea , but if you absolutely, positively need your ajax call to complete before the next script tag is executed, that's the only way to do it. Of course, it means that any DOM elements defined below your script tag in the HTML document won't exist yet.

Answer 2

It feels like you want some sort of dependency management system for your front-end scripts.

Try out RequireJS . You could load in your script, run your ajax request, and depending on your logic, decide whether or not to load the second external script.

This is assuming you can control the markup on the page of course.