Comparing two codes, which approach is better?

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.
https://jsfiddle.net/5umd9zfg/49/

apiIsReady = true; / Line Added:
https://jsfiddle.net/5umd9zfg/30/

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

Code 2
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)
      }
  }

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:

1 Like

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.

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!

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?