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
Skrip Asinkron Dasar (Tanpa Fitur Callback)
var script = document.createElement('script');
script.src = "../js/highlight.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
Labels: JavaScript, Lanjutan, Potongan
11 Comments:
[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.
[ Bismillah ]
keren kang :D tutornnya bermanfaat bagi saya yang masih newbie B)
#salam damai kang rohman :)
- Blogwalking -
postingan langkah kang ^_^
makasih udah share ... :D
#salam damai!
wow keren tampilannya sekarang lebih mencerminkan kesendirian yg penuh dedikasi hehe ( sory lebe mas )
ijin nyimak aja gan soalnya gak ngerti :D
saya masih penasaran dengan halaman kosong di sebelah kanan blog ini..
belum pahan :(
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?
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!');
});
});
});
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:)
owh gini toh :-bd
Post a Comment
<< Home