Any way to gracefully enforce a timeout limit when loading a slow external file via javascript?

Question

I'm using javascript to include some content served up from a php file on another server. However, this other service can sometimes get flaky and either take a long time to load or will not load at all.

Is there a way in JS to try to get the external data for x number of seconds before failing and displaying a "please try again" message?

<script type="text/javascript" src="htp://otherserver.com/myscript.php"></script>

Answer 1

Couple issues: you can use timeout thresholds with XMLHttpRequest (aka ajax), but then since it's on an otherserver.com you cannot use XMLHttpRequest (and support all A-grade browsers) due to the Same Origin Policy restriction.

If the script introduces any kind of global name (eg any variable name, function name, etc) You can try setTimeout to keep checking for it:

var TIMELIMIT = 5; // seconds until timeout
var start = new Date;

setTimeout(function() {
  // check for something introduced by your external script.
  // A variable, namespace or function name here is adequate:
  var scriptIncluded = 'otherServerVariable' in window;

  if(!scriptIncluded) {
    if ((new Date - start) / 1000 >= TIMELIMIT) {
      // timed out
      alert("Please try again")
    }
    else {
      // keep waiting...
      setTimeout(arguments.callee, 100)
    }
  }
}, 100)

The problem as I see it is you cannot cancel the request for the script. Please someone correct me if I'm wrong but removing the <script> from the DOM will still leave the browser's request for the resource active. So although you can detect that the script is taking longer than x seconds to load, you can't cancel the request.

I think you may be out of luck.

Answer 2

The only way I can think of doing this is to create a proxy on another (PHP-enabled) server which will fetch the data for you, but will stop when a certain timeout limit has been reached (and it can just return an empty result).

Answer 3

This is purely, purely theoretical:

<script> tags can be dynamically inserted into the DOM, at which point the script will be fetched and processed. This dynamic script tag injection is how some achieve cross-domain "AJAX."

I would imagine you could declare a global variable var hasLoaded = false;. At the end of the script you are attempting to load you could set that variable to true hadLoaded=true;. After injecting the script tag into the DOM you could then kickoff a setTimeout() whose callback function checks to see if "hasLoaded" is set to true. If it isn't, you can assume the script has not yet loaded fully into the browser. If it has, you can assume it has loaded completely.

Again, this is theoretical, but if you test it be sure to report back, I'm very curious.

Answer 4

I think that the only way to do this is take the content of the file via ajax and then set a timer. If the request finishes before the timer you can evaluate the respons with eval(that's not the better solution anyway), otherwise you can stop the ajax request and write the error message.