Comparing two codes, which approach is better?

Curriculum Help
1

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:

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 your load_all_waitting_inits function and if it was true then do your loop other wise do nothing.

Code 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.

Code 2

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)
      }
  }
3

If we are using window.onYoutubePlayerApiReady then can’t we apply some sort of listner to it allowing us to reseive either a callback/promise that triggers your given function such as load / init then you don’t have to check for apiIsReady since the api will let you know when it is ready.

In terms of which is better I will say the first one, because I understand it, well it is easier to understand while the second one is a mistry to figure out streight way. Plus you can remove apilReady for the first one to make things even simpler function load_all_waitting_inits() { if (apiIsReady) { for (let opts of waitting_inits) { init(opts); } } } thus you don’t need to say let apiIsReady = false;.

Hope it helps :blush:

4

Can you show me a jsfiddle of it working without ‘apiIsReady’ being needed?

I’ve been trying to figure out how to remove it from the code.

Can you show me how to do that please.

5

What would be the fun it that? But here is a answer from stackoverflow that has something very similar to what I was thinking. That way you at least can do without apiIsReady and replace it with something bit more useful :slight_smile:

Keep having fun!

6

You can’t show me a fiddle of it working without the need for apiIsReady?

Then let’s do it step by step.

What’s the first thing that would need to be done?