title: Trigger callback function when two event listeners are fulfilled
body: <p>I am looking for an elegant way to call a callback function when two load event listeners are fulfilled. Currently I am using a variable which has the state of the event listener and is checked in an interval. This is an example of my depicted situation:</p>
  <pre class="lang-js prettyprint-override"><code>function executeExtScript(cb, srcStyle, srcJs) {
      // 01
      let scripts = document.getElementsByTagName('script');
      let scriptExists = false;
      for (let i = scripts.length; i--;) {
          if (scripts[i].src === srcJs) scriptExists = true;
      }
      scriptExists === true ? cb() : loadScript();
      // 02
      function loadScript() {
          let loadFinish = [false, false];
          let head = document.head;
          let style = document.createElement(&quot;link&quot;);
          style.setAttribute(&quot;rel&quot;, &quot;stylesheet&quot;);
          style.setAttribute(&quot;href&quot;, srcStyle);
          let script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = srcJs;
          script.onload = () =&gt; {loadFinish[0] = true}
          style.onload = () =&gt; {loadFinish[1] = true}
          var timer = setInterval(function() {
              if (loadFinish[0] &amp;&amp; loadFinish[1]) {
                  cb();
                  clearInterval(timer);
              }
          }, 100);
          head.appendChild(style);
          head.appendChild(script);
      }
  }
  </code></pre>
  <p>Is there any more elegant way to solve this problem - in particular I would like to prevent using a set interval function provided that they may run for a very long time if I fail to fetch one of the files</p>
  <p>Thanks in advance</p>