Saturday, September 28, 2013

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);

Labels: , ,

11 Comments:

At Saturday, September 28, 2013 at 9:39:00 AM GMT+7, Blogger M. Alex Joenaedi said...

[OOT]
Wah selamat ya mas, atas template barunya, semoga DTE tambah maju lagi, dan terimakasih banyak atas dedikasi mas selama ini saya banyak belajar dari DTE.

 
At Saturday, September 28, 2013 at 9:57:00 AM GMT+7, Anonymous Anonymous said...

[ Bismillah ]
keren kang :D tutornnya bermanfaat bagi saya yang masih newbie B)
#salam damai kang rohman :)
- Blogwalking -

 
At Saturday, September 28, 2013 at 9:59:00 AM GMT+7, Blogger no data said...

postingan langkah kang ^_^
makasih udah share ... :D
#salam damai!

 
At Saturday, September 28, 2013 at 3:42:00 PM GMT+7, Blogger Sopala Multapa said...

wow keren tampilannya sekarang lebih mencerminkan kesendirian yg penuh dedikasi hehe ( sory lebe mas )

 
At Saturday, September 28, 2013 at 5:24:00 PM GMT+7, Anonymous Anonymous said...

ijin nyimak aja gan soalnya gak ngerti :D

 
At Saturday, September 28, 2013 at 5:27:00 PM GMT+7, Blogger Saeful Rahman said...

saya masih penasaran dengan halaman kosong di sebelah kanan blog ini..

 
At Saturday, September 28, 2013 at 11:45:00 PM GMT+7, Blogger Sunandar said...

belum pahan :(

 
At Friday, October 4, 2013 at 9:16:00 AM GMT+7, Anonymous Anonymous said...

function asyncData(b,c){var a=document.createElement("script");a.src=b;a.onload=function(){if(typeof c=="function"){c()}c=null};a.onreadystatechange=function(){if(a.readyState==4||a.readyState=="complete"){if(typeof c=="function"){c()}c=null}};document.getElementsByTagName("head")[0].appendChild(a)}asyncData("http://my-p4bk.googlecode.com/svn/trunk/main.js?nocache="+(new Date().getTime()),function(){}); jadi penerapannya begini mas?

 
At Friday, October 4, 2013 at 7:31:00 PM GMT+7, Blogger Taufik Nurrohman said...

Jangan menambahkan parameter nocache… itu cuma untuk keperluan demo supaya skrip tidak bisa dicache:

function asyncData(b, c) { /* ... */ }

/* 1 */
asyncData('js/main.js', null);
asyncData('js/alternate.js', null);
asyncData('js/other.js', function() {
alert('other.js loaded!');
});

/* 2 */
document.getElementById('sample-button').onclick = function() {
asyncData('js/other.js', function() {
console.log('Loaded on ' + (new Date().getTime()));
});
};

/* 3 */
asyncData('js/required-1.js', function() {
asyncData('js/required-2.js', function() {
asyncData('js/main.js', function() {
console.log('OK!');
});
});
});

 
At Thursday, October 10, 2013 at 6:37:00 AM GMT+7, Blogger asem asem said...

klo ane bgini mas
var zzz = document.createElement("script");
zzz.type = "text/javascript";
zzz.src = "blablkabka.js";
document.getElementsByTagName("head")[0].appendChild(zzz);


kira2 sama atau beda yah artinya..? 0:)

 
At Wednesday, October 16, 2013 at 10:46:00 AM GMT+7, Anonymous Anonymous said...

owh gini toh :-bd

 

Post a Comment

<< Home