Data Asinkron dengan Callback

Tabel Konten
  1. Penggunaan 
  2. Demo 
  • Skrip Asinkron Dasar (Tanpa Fitur 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);

    11 Komentar

    • M. Alex Joenaedi

      [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.

    • Anonim

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

      • no data

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

    • Sopala Multapa

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

    • Anonim

      ijin nyimak aja gan soalnya gak ngerti :D

    • Saeful Rahman

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

    • Sunandar

      belum pahan :(

    • Anonim

      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?

      • Taufik Nurrohman

        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!');
        });
        });
        });
    • asem asem

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

    • Anonim

      owh gini toh :-bd

    Komentar telah ditutup.