Results change if I comment out alerts?!? [Solved]

HELP!

My TwitchTV project is at: https://marcnshapiro.github.io/twitch/index.html

I have spent most of 13 hours today on this project and this final twist is just driving me up a wall! I have inserted two ‘alerts’ in my code. One near the top, at line 31, just after I get my stream data for the current channel, and one near the end at line 82 when I am just about done processing the current channel…

These alerts do NOTHING! They are, in fact displaying a null string. Originally they were displaying data for testing, but I have changed them to null strings to clearly show that they are not actually doing anything. But if I take them out then the program gives incorrect results!

With two alerts either commented, or not, there are four possibilities. All four ways should give the same (correct) results. Unfortunately, with both alerts uncommented I get the correct result, but have to ‘OK’ two alerts for every channel. With either, or both alerts commented I get incorrect result. In fact, I get a different type of incorrect result with each of the three possibilities.

I can’t see why this should happen. The code that I comment out DOES NOTHING, yet the results change. It behaves as if javascript were multi-threaded and all of the calculations have not been completed. But javascript, as I understand it, is single threaded and should not have these kinds of issues. If anyone can figure out why this should happen, and a way to avoid it I would greatly appreciate it.

Hi.

I forked your project and made some edits. Check out the diff. I don’t have much time to explain right now, so please bear with this hasty post for now.

The version with the alerts work because, IMO, the alerts popping up give time for the async calls to complete. If you removed them the HTML gets rendered before you get any requested data from the JSON calls.

When calling a function that does async stuff with for-loops, it’s better to replace var with let.

Avoid global variables. I noticed that there are variables of the same name in both the global space and the getUser function.

I moved $("#display").html(...) to the lines after setting a string value to the html variable (in the two locations in the code). The reason is that, if ever the inner $.getJSON gets called, it will take some time before it can fill the html variable in its callback. Leaving $("#display").html outside, it might thus run before the inner $.getJSON finishes its job.

That was my instinct too.

Side note, next time I’m stuck with an Async request returning too quickly and I can’t remember how to handle it properly, I’m just sticking an alert in there!

2 Likes

Thanks! That seems to have been the answer. So, while Javascript is single threaded, jQuery JSON calls ARE asynchronous. This is what was tripping me up. I would have just merged your fork back into my site, but I wasn’t sure how to do that and wanted to test this quickly. Since it was really only a few lines of changes I made them manually in my local repository and committed them from there. I was not aware of the ‘let’ vs ‘var’ issues, although I had noticed that var was local to the function and not the enclosing block.

Thanks, also for the clear explanation, not only of what you did, but why.

I’ll have to make a pull request before you can merge my changes.