This was the issue:
Removing a line causes the browser to freeze
apiIsReady = true;
/ Line Removed:
Try clicking on a play button on the image and the browser freezes.
apiIsReady = true;
/ Line Added:
Which was explained to me here:
https://stackoverflow.com/a/53580992/10641025
Both of these codes bellow are aimed at preventing an ‘infinite loop’ from ever happening.
Which is what I’m told it’s called.
What I’m confused about is which of these is a better option.
i.e., If I were to save one of these codes, which would it be?
Can someone explain for me what’s the difference between
This way:
If you want to prevent infinite loop, you can just check
apiIsReady
inside yourload_all_waitting_inits
function and if it wastrue
then do your loop other wise do nothing.
https://jsfiddle.net/h93qzu0t/1/
Top:
const waitting_inits = [];
function load_all_waitting_inits() {
if (!apiIsReady) return
for (let opts of waitting_inits) {
init(opts);
}
}
Bottom:
let apiIsReady = false;
window.onYouTubePlayerAPIReady = function() {
apiIsReady = true;
load_all_waitting_inits()
};
function init(opts) {
loadPlayer();
if (apiIsReady) {
addVideo(opts.video, opts.playerVars || {});
} else {
waitting_inits.push(opts)
}
}
And how this does it?
Check if array includes object.
https://jsfiddle.net/5umd9zfg/54/
Top:
const waitting_inits = [];
function load_all_waitting_inits() {
for (let opts of waitting_inits) {
init(opts);
}
}
Bottom:
let apiIsReady = false;
window.onYouTubePlayerAPIReady = function() {
apiIsReady = true;
load_all_waitting_inits()
};
function init(opts) {
loadPlayer();
if (apiIsReady) {
addVideo(opts.video, opts.playerVars || {});
} else if (!waitting_inits.includes(opts)) // if array doesn't include opts then push
{
waitting_inits.push(opts)
}
}