One of the quickest and simplest ways to fix a race condition issue is to move the script that isn’t functioning properly to a later section of the page in the execution order. A more targeted fix is recommended, but when you need something quick, this is one of the best methods – as long as the timing based issue isn’t held up by an asynchronous method to finish.
Another common example of a race condition issue comes when an ajax call doesn’t complete before other methods that rely on its return data are called.
These kinds of situations are difficult to fix because the issue isn’t typically with the code that is immediately related to that part of the site. One way of handling asynchronous issues is to wrap the code that’s not executing properly in a custom event handler, which can then be fired from the end statement of a function like an async ajax call. A more complicated fix would be needed if the code that is not executing properly is wrapped in a $(document).ready handler.
Another option is to use the $.holdReady(state) function. If you call $.holdReady(true) the document ready function will be locked. Once the code that is not returning when expected has completed, use $.holdReady(false) to unlock the document ready handler and allow the rest of the code to complete. The only downside to the latter method is when a lot of functions or jQuery plugins are added at document ready, the holdReady function can cause other issues.
Example 1: Using a custom event to ensure the data has returned before trying to use it.
Example 2: Using the holdReady function to prevent the data from being used before it’s there.