How to delay variables and functions?

Question

I get an error in my console, which says "Firebase is not defined".

1. Seems like this "base" code haven't loaded before the other one.

EDIT cannot put the script in the header so need to do it this way

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "https://cdn.firebase.com/v0/firebase.js";
document.head.appendChild(script);

2. So I need to delay these somehow. How would I achieve that?

var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
myDataRef.on('child_added', function(snapshot) {
var post = snapshot.val();
});

function submitPost(e) {
var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
var name = $('#field0').val();
myDataRef.push({name: name});
$('#field0').val('');
}

3. I tried to put it within $( document ).ready(function() but didn't work. Link: https://learn.jquery.com/using-jquery-core/document-ready/

use `setTimeout()` to wait a few seconds before fire the function — node_modules, Apr 12 '16 at 12:18
What you are looking for is `onload` event: http://stackoverflow.com/questions/16230886/trying-to-fire-onload-event-on-script-tag — freakish, Apr 12 '16 at 12:18
Try loading the library directly into the HTML using `` and then use the `$(document).ready(function(){});` — , Apr 12 '16 at 12:19
Did you tried within a `$(window).load(function() { ... });` ? It wait until all the resources are loaded, not only the DOM — Alex, Apr 12 '16 at 12:19
IIRC scripts added dynamically are ´async´ by default. You need to set async to `false` — Johan, Apr 12 '16 at 12:19
try using $( window ).on( 'load', function() { // Your code here ? } ); — KodeFor.Me, Apr 12 '16 at 12:19
Put firebase load code in your head tag, outside of `$(document).ready();` then put the `$(document).ready();` at bottom page — Yuri, Apr 12 '16 at 12:20
@Hbaecklund `setTimeout(function() { console.log("Fire after 1 second."); }, 1000);` — node_modules, Apr 12 '16 at 12:20
@Hbaecklund Don't use `setTimeout`. How will you estimate the time needed to wait? It's ridiculous. — freakish, Apr 12 '16 at 12:28
@C0dekid.php added setTimeout of 3 seconds, and it didn't do it — Hbaecklund, Apr 12 '16 at 14:44

score 1 · Answer 1 · answered Apr 12 '16 at 12:21

Use onload method of document.createElement(), this way:

var script = document.createElement('script');
script.onload = function() {
  // put here code which depends on Firebase to be loaded...
};
script.type = "text/javascript";
script.src = "https://cdn.firebase.com/v0/firebase.js";
document.head.appendChild(script);

score 1 · Answer 2 · edited May 23 '17 at 12:15

What you are looking for is onload event:

var script = document.createElement("script");
document.head.appendChild(script);

script.onload = function() {
    var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
    myDataRef.on('child_added', function(snapshot) {
        var post = snapshot.val();
    });

    function submitPost(e) {
        var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
        var name = $('#field0').val();
        myDataRef.push({name: name});
        $('#field0').val('');
    }
};
script.type = "text/javascript";
script.src = "https://cdn.firebase.com/v0/firebase.js";

Note that according to this SO thread [ Trying to fire the onload event on script tag ] the order of those operations (calling appendChild, setting src and onload) matters. Haven't check that.

Also since you are using jQuery you might want to have a look at getScript function: http://api.jquery.com/jQuery.getScript/

How to delay variables and functions?

2 Answers2