-1

I am using a JS class that is loaded in an external script that I can't edit, I am relying on the class inside the external JS file but i'm not sure how to tell when the script is finished and the class has been created. I have tried setTimeout but that is unreliable because the class might not have been created, i tried adding the script above so that it has extra time but this again is unreliable it works every other time. I have considered $.getScript as well but is there a way of detecting whether a JS class has been created. I apologies if this exists but googling JS and class only returns questions about html classes not JS Classes. Thanks I am using jQuery and JS so either approach is fine.

David Benz
  • 49
  • 6
  • Javascripts are loaded in the order they appear in the markup. If your script file appears after the script that defines the class, then the class should always exist. You could do some polling, but that is almost always the wrong approach. Can you provide some details about how each script is being loaded? – I wrestled a bear once. Aug 26 '21 at 20:45
  • I can detect the script and I have placed it higher but when the script runs it creates a class and I need access to that class, I just need a way to detect whether the script has finished running or whether the class has been created. – David Benz Aug 26 '21 at 20:47
  • https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver – epascarello Aug 26 '21 at 20:48
  • Wait, are you talking about a css class or a javascript class? I have no idea why you would need to wait for a css class so I assumed you meant a javascript class... also, you used the oop tag so.. – I wrestled a bear once. Aug 26 '21 at 20:51
  • @epascarello - how is that helpful for detecting whether a JS class has been defined – I wrestled a bear once. Aug 26 '21 at 20:52
  • I read it as an element.... not a JavaScript class/variable – epascarello Aug 26 '21 at 20:54
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Aug 27 '21 at 04:35
  • https://stackoverflow.com/questions/9521298/verify-external-script-is-loaded/9521360 – epascarello Aug 27 '21 at 12:53
  • So @DavidBenz did you give up? – epascarello Aug 27 '21 at 16:18

2 Answers2

-1

ok, no need for DevTools or setTimeout. I'm re-editing the answer.

What about loading your external script asynchronously and using the callback to check if your object is already there?

With jQuery, something like:

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(jqxhr.status); //200
console.log('Your object could be already there');
});
Loreb
  • 37
  • 5
  • what does this have to do with the question? How is Dev Tools going to have his code know when a element is added to the page? – epascarello Aug 26 '21 at 20:49
  • I know it exists its just that i am trying to use it at launch so whether the script i am loading has finished is 50/50 sometimes its done and sometimes its not the same code leads to different results when i refresh and re load. – David Benz Aug 26 '21 at 20:50
  • 1
    epascarello, David said he didn't want setTimeout ;) David: Have you tried to to set a listener on the javascript loading? you get set a callback after the loading and hopefully you'll have your class ready – Loreb Aug 26 '21 at 21:49
-1

Unsure why you would need to do this. Seems like a bandaid for the real problem, but you poll page until it is there.

function check() {
  const isDefined = typeof Rectangle !== 'undefined';
  if (isDefined) alert('here');
  else window.setTimeout(check, 1);
}
check();


window.setTimeout(() => {

  class Rectangle {
    constructor(height, width) {
      this.height = height;
      this.width = width;
    }
  }
  window.Rectangle = Rectangle;

}, 1000);
epascarello
  • 204,599
  • 20
  • 195
  • 236