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.
By M. Alex Joenaedi, at Saturday, September 28, 2013 at 9:39:00 AM GMT+7
[ Bismillah ]
keren kang :D tutornnya bermanfaat bagi saya yang masih newbie B)
#salam damai kang rohman :)
- Blogwalking -
By Anonymous, at Saturday, September 28, 2013 at 9:57:00 AM GMT+7
postingan langkah kang ^_^
makasih udah share ... :D
#salam damai!
By no data, at Saturday, September 28, 2013 at 9:59:00 AM GMT+7
wow keren tampilannya sekarang lebih mencerminkan kesendirian yg penuh dedikasi hehe ( sory lebe mas )
By Sopala Multapa, at Saturday, September 28, 2013 at 3:42:00 PM GMT+7
ijin nyimak aja gan soalnya gak ngerti :D
By Anonymous, at Saturday, September 28, 2013 at 5:24:00 PM GMT+7
saya masih penasaran dengan halaman kosong di sebelah kanan blog ini..
By Saeful Rahman, at Saturday, September 28, 2013 at 5:27:00 PM GMT+7
belum pahan :(
By Sunandar, at Saturday, September 28, 2013 at 11:45:00 PM GMT+7
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?
By Anonymous, at Friday, October 4, 2013 at 9:16:00 AM GMT+7
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!');
});
});
});
By Taufik Nurrohman, at Friday, October 4, 2013 at 7:31:00 PM GMT+7
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:)
By asem asem, at Thursday, October 10, 2013 at 6:37:00 AM GMT+7
owh gini toh :-bd
By Anonymous, at Wednesday, October 16, 2013 at 10:46:00 AM GMT+7
Post a Comment
<< Home