HTML Web Workers

Web worker adalah JavaScript yang berjalan di latar belakang, dan tidak akan mengganggu kelancaran halaman.

Apakah Web Worker?

Ketika menjalankan skrip di halaman HTML, halaman tidak boleh bertindak balas sehingga skrip selesai.

Web worker adalah JavaScript yang berjalan di latar belakang, berasingan daripada skrip lain, dan tidak akan mengganggu kelancaran halaman. Anda boleh terus melakukan apa yang anda kehendaki: klik, pilih kandungan, dll, sementara web worker berjalan di latar belakang.

Dukungan Pelayar

Nombor di dalam jadual menunjukkan versi pelayar yang mendukung Web Worker sepenuhnya.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Contoh HTML Web Workers

Contoh di bawah ini membuat web worker sederhana untuk mengira di latar belakang:

Pengiraan:

Coba Sendiri

Pengesahan Dukungan Web Worker

Sebelum membuat web worker, sila pastikan pengguna pelayar anda mendukungnya:

if (typeof(Worker) !== "undefined") {
    // Ya! Dapat disokong Web Worker!
    // Beberapa kod.....
}
    // Maaf! Tidak disokong Web Worker!
}

Buat Fail Web Worker

Sekarang, mari kita ciptakan web worker kami di dalam file JavaScript eksternal.

Di sini, kami menciptakan skrip penghitung. Skrip ini disimpan di file "demo_workers.js":

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

Bagian penting dalam kode di atas adalah metode postMessage() - ia digunakan untuk mengirimkan pesan ke halaman HTML.

Komentar: Web worker biasanya tidak digunakan untuk skrip yang sederhana seperti ini, tetapi untuk tugas yang memerlukan sumber daya CPU yang tinggi.

Membuat objek Web Worker

Sekarang kami memiliki file web worker, kami butuh menghubungkan ke halaman HTML.

Baris kode di bawah ini memeriksa adanya worker, jika tidak ada, - ia akan membuat objek web worker baru dan menjalankan kode di "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Lalu kami dapat menerima pesan dari web worker.

Tambahkan pendengar peristiwa "onmessage" kepada web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Ketika web worker mengirimkan pesan, kode dalam pendengar peristiwa akan dijalankan. Data dari web worker akan disimpan di event.data.

Hentikan Web Worker

Setelah membuat web worker, ia akan terus mendengar pesan (meskipun skrip eksternal selesai) sampai dihentikan.

Untuk menghentikan web worker dan melepaskan sumber daya browser/komputer, gunakan metode terminate():

w.terminate();

Penggunaan ulang Web Worker

Jika Anda menetapkan variabel worker sebagai tidak terdefinisi, kode ini dapat digunakan kembali setelah dihentikan:

w = tidak terdefinisi;

Kode contoh Web Worker penuh

Kami telah lihat kode Worker di dalam file .js. Berikut adalah kode halaman HTML:

Contoh

<!DOCTYPE html>
<html>
<body>
<p>Bilangan: <output id="result"></output></p>
<button onclick="startWorker()">Mulai Kerja</button> 
<button onclick="stopWorker()">Hentikan Kerja</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Maaf! Tidak ada dukungan Web Worker.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Coba Sendiri

Web Worker dan DOM

Karena Web Worker berada di dalam berkas eksternal, mereka tidak dapat mengakses objek JavaScript berikut:

  • Objek window
  • Objek document
  • Objek parent