Data Asinkron dengan Callback

Fungsi ini bisa digunakan untuk memuat file JavaScript secara asinkron, sekaligus juga memungkinkan pengguna untuk mengeksekusi fungsi sesaat setelah data tersebut berhasil termuat:

function asyncData(url, callback) {
    var script = document.createElement('script');
    script.src = url;
    script.onload = function() {
        if (typeof callback == "function") callback();
        callback = null;
    };
    script.onreadystatechange = function() {
        if (script.readyState == 4 || script.readyState == "complete") {
            if (typeof callback == "function") callback();
            callback = null;
        }
    };
    document.getElementsByTagName('head')[0].appendChild(script);
}

Penggunaan

Sebagai contoh, Anda ingin memuat skrip Syntax Highighter secara tidak langsung. Namun pada saat yang bersamaan Anda juga ingin memastikan agar eksekusi plugin terjadi hanya jika skrip tersebut telah termuat:

asyncData("../js/highlight.min.js", function() {
    hljs.initHighlighting();
});

Demo

Lihat Demo

Skrip Asinkron Dasar (Tanpa Fitur Callback)

var script = document.createElement('script');
script.src = "../js/highlight.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

Share this post