This question has already been answered:

There is such code:

var artAjaxRequest = new function () { var xhr; xhr = new XMLHttpRequest(); xhr.open('GET', '/assets/json/arts.json', true); xhr.send(); xhr.onload = function(){ // Π’ΡƒΡ‚ ΠΌΡ‹ парсим json ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅ΠΌ массив ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ } this.getNewArts = function(){ // Π­Ρ‚Π° функция занимаСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° страницу }; }();

This is all "housekeeping" through artAjaxRequest.getNewArts(); .
But there is a problem here: when I write somewhere in the code artAjaxRequest.getNewArts(); , the getNewArts code is being getNewArts , whereas json itself has not yet arrived and the onload function has not worked its way. Why? Because the ajax request is not executed as quickly as the browser understands the code.
Accordingly, json is not parsed, and errors occur in the getNewArts function.
And here's the question: how to make .getNewArts run after xhr.onload ?
But don't be in a hurry to put artAjaxRequest.getNewArts(); inside onload . The getNewArts() that the getNewArts() method will be called often, not just one time when json arrives.
I would be grateful for clarifications and advice on improving the composition of the code.

Reported as a duplicate by vp_arth , Grundy members javascript Mar 2 '17 at 6:20 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • @vp_arth, where does that mean? Not understood. What does the browser FF? - VostokSisters
  • @vp_arth, well, a lot of events, then you can see for yourself. - VostokSisters
  • Π½Π΅ ΡΠΏΠ΅ΡˆΠΈΡ‚Π΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ artAjaxRequest.getNewArts(); Π²Π½ΡƒΡ‚Ρ€ΡŒ onload Π½Π΅ ΡΠΏΠ΅ΡˆΠΈΡ‚Π΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ artAjaxRequest.getNewArts(); Π²Π½ΡƒΡ‚Ρ€ΡŒ onload It is not clear why not. - vp_arth
  • @vp_arth, below IE9 are not supported. But who will not give a damn about IE9 in 2017 - that is the question ... - VostokSisters
  • @vp_arth, I told you why. Read again what I wrote. - VostokSisters

1 answer 1

If you understand correctly, then you can create a variable for the generated result in the scope of the function.
You can also implement the Observer pattern for timely notification of the received data.

 var artAjaxRequest = new function () { var xhr; xhr = new XMLHttpRequest(); xhr.open('GET', '/assets/json/arts.json', true); xhr.send(); var response; var subscribers = []; xhr.onload = function(){ // Π’ΡƒΡ‚ ΠΌΡ‹ парсим json ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅ΠΌ массив ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ response = parsedJSON; // ΠžΠΏΠΎΠ²Π΅Ρ‰Π°Π΅ΠΌ подписчиков subscribers.forEach(function(sub) { sub(); }); subscribers.length = 0; } this.getNewArts = function(next){ if (!response) { // ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Π΅ΠΌΡΡ subscribers.push(getNewArts.bind(this, next)); return; } // Π­Ρ‚Π° функция занимаСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° страницу next(something) }; }();
  • Perfect solution (no: D). This is the first thing I did. By the way, I’ll say right away that this variable already exists. But the weather does not. Because the script is executed as an asynchronous request? It is executed stupidly straight after xhr.send() . If artAjaxRequest.getNewArts(); is found artAjaxRequest.getNewArts(); in the code artAjaxRequest.getNewArts(); (I mean, beyond the limit of this function, it is just used somewhere), then what will the getNewArts() function return? Nothing. And it is necessary to work out his own. How to execute getNewArts() after the answer from onload comes? This is my question. - VostokSisters
  • Well then you have a duplicate, my friend) Now I will find) - vp_arth
  • I think you will find Duck advice about onload . If so, then I will seek the cancellation of the duplicate with foaming at the mouth and then I will do a contest, and the administration will complain about it. This is how it is. - VostokSisters
  • There is nothing wrong with the duplicate question. Just a solution to this problem is already in another question. Literally, your question sounds like "Как Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ асинхронной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ?" - vp_arth
  • Not. How to return the result of an asynchronous function is easy. The question is different. How to perform a function after an asynchronous function, but so that the call to this function is not ignored when the asynchronous function is not ready, but executed as it will be ready. In short, I don't need to write to getNewArts() return; because I need it to work its own, and not run as a stub. You need something eventListner , but not on the DOM object, but on the xhr.status variable (which indicates the completion of the request). - VostokSisters