-1

I've searched for two days and have not found an answer to this. I need to load several JSON data files at the startup of my JavaScript game. The game cannot function nor can the user do anything else until the game starts and initializes (based on this data), so it doesn't need to be asynchronous (allowing the user to see blank elements on the page would degrade the user experience). I've read time and time again that it is heavily frowned upon to use the "async: false" setting of the jQuery.ajax request. What is the appropriate way to load initial data files in JavaScript? Examples of what I am talking about: Virtually any game on Facebook that has a "Loading" screen with a gear or a game like TribeZ that has a, "Please Wait... Extracting Resources" message.

Wayne Cellon
  • 1
  • Why is it frowned upon to use synchronous http requests? That seems like the intuitive way to do it... – Samuel Reid Aug 01 '13 at 19:47
  • 1
    @SamuelReid it locks up the browser until all resources are loaded – John Dvorak Aug 01 '13 at 19:48
  • Why don't you combine some CSS that displays a loading gif with the `success` setting? – Malkus Aug 01 '13 at 19:49
  • possible duplicate of [Javascript to only display animated gif when loaded](http://stackoverflow.com/questions/5826747/javascript-to-only-display-animated-gif-when-loaded) – Malkus Aug 01 '13 at 19:50
  • Initially show a loading screen and start to asynchronously load the files. Upon completion, update the loading screen progress and start the game? – plalx Aug 01 '13 at 19:53
  • @JanDvorak That's what he's trying to do though. He said "the game cannot function nor can the user do anything else until the game starts and initializes (based on this data), so it doesn't need to be asyncrhonous". It seems like the way to do it would be to load it all along with the page synchronously. I mean he could start it on the document load event so he still waits for the dom to show up. – Samuel Reid Aug 01 '13 at 19:57

3 Answers3

2

You just answered your own question. Put up a Loading - please wait message, get your data, then hide the message. Set up the rest of your UI to use reasonable defaults until the data is loaded (or hide them altogether).

Dan Pichelman
  • 2,312
  • 2
  • 31
  • 42
  • Yes, I can do it that way, but my question is: Is there an api for loading synchronously whether it be in jQuery or something else? Asynchronous isn't always better. You don't want to jump in the shower before the water has warmed up or try to use your OS before your computer has loaded it. – Wayne Cellon Aug 01 '13 at 21:56
1

You don't want to do this. Synchronous XHR is a can of worms; bugs related to it keep popping up and the support for it is only going to get worse as implementers want to get rid of it. Sync XHR blocks everything happening in that tab (except CSS animations using transforms)

I'm touting my own horn here, but I made a JS preloader library for exactly the same use case (preloading game assets). There's also CreateJS' PreloadJS that's backed by some major companies.

quinnirill
  • 814
  • 4
  • 6
0

I think what you are looking for is the complete event for $.ajax

This will allow you to chain a set of function together but have other methods still fire asynchronously on success while others will not fire until completion.

complete

Type: Function( jqXHR jqXHR, String textStatus ) A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror"). As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn.

This is an Ajax Event.

Source

Malkus
  • 3,686
  • 2
  • 24
  • 39