Menu
I have an issue. One of my JS scripts needs Facebook SDK and Twitter widgets JS to load first. Facebook creates FB object, Twitter creates twttr object. Both of them create these objects AFTER my script fires, even though they're loaded from <head>.
I think solution is to periodically check if FB and twttr are defined, and then proceed with executing my script. But I have no idea how to do this.
I tried creating a loop
while (typeof FB === 'undefined' || typeof twttr === 'undefined' || typeof twttr.widgets === 'undefined') { // run timeout for 100 ms with noop inside } But this clearly does not work as it keeps firing timeouts at a high speed and page hangs.
Please help me, I can't sleep because of this issue.
641
Wait for function to finish using async/await keywords As you already know from the Promise explanation above, you need to chain the call to the function that returns a Promise using then/catch functions. The await keyword allows you to wait until the Promise object is resolved or rejected: await first(); second();
Use the window. onload Event to Wait for the Page to Load in JavaScript.
To make your JavaScript code wait, use the combination of Promises, async/await, and setTimeout() function through which you can write the wait function that will work as you would expect it.
The standard way of creating a delay in JavaScript is to use its setTimeout method. For example: console. log("Hello"); setTimeout(() => { console.
If the scripts are loaded in the normal, synchronous way, then just make sure that your <script> include appears after the library scripts in the document's <head>. If, on the other hand, those scripts are loading objects asynchronously (as seems to be the case), then create something like this:
function whenAvailable(name, callback) { var interval = 10; // ms window.setTimeout(function() { if (window[name]) { callback(window[name]); } else { whenAvailable(name, callback); } }, interval); } And use it like this:
whenAvailable("twttr", function(t) { // do something }); The function given in the second argument to whenAvailable will not execute until twttr is defined on the global window object. You can do the same thing for FB.
Important note: Those libraries probably also provide some built-in way to execute code after they have loaded. You should look for such hooks in their respective documentation.
126
Have you put your script to be executed on page load? (ie. body onload="do_this ();")
That should make your code execute once all external resources has been loaded.
setTimeout will return immediately, if you'd like to wait for certain variable to be defined, use something as the below.
function when_external_loaded (callback) { if (typeof FB === 'undefined' || typeof twtter === 'undefined') { setTimeout (function () { when_external_loaded (callback); }, 100); // wait 100 ms } else { callback (); } } ... when_external_loaded (function () { alert (FB); alert (twtter); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
