Web Worker là gì?
Khi thực thi một scripts trong trang HTML thì trang sẽ không thực hiện giao tiếp với server cho đến khi script hoàn thành.
Một web worker là một JavaScript chạy dưới nền Web, độc lập với các script khác và không làm ảnh hưởng đến hiệu suất của trang. Bạn có thể làm mọi thứ như click chuột, quét chọn,…. trong khi web worker đang chạy.
Các trình duyệt hỗ trợ
Web worker được hỗ trợ bởi hầu hết các trình duyệt, ngoại trừ Internet Explorer.
Ví dụ minh họa HTML5 Web Workers
Ví dụ dưới đây tạo ra một web worker đơn giản nhảy số tăng dần
Kiểm tra trình duyệt có hỗ trợ Web Worker
Trước khi tạo ra một web worker, ta phải kiểm tra xem trình duyệt đang dùng có hỗ trợ không:
if(typeof(Worker)!=="undefined")
{
// Có hỗ trợ
// Viết code.....
}
else
{
// Xin lỗi! không hỗ trợ rồi..
}Tạo ra một file Web Worker
Chúng ta tạo ra một script đếm. Script được viết trong file “demo_workers.js” :
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount(); Phần quan trọng của đoạn code trên chính là phương thức postMessage(), nó dùng để gửi thông tin đến trang HTML.
Tạo ra một đối tượng Web Worker
Chúng ta đã có một file web worker, giờ ta cần gọi nó từ trang HTML.
Đoạn code sau kiểm tra worker có hay chưa, nếu chưa, tạo web worker mới và chạy code trong “demo_workers.js“:
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
} Sau đó bạn có thể gửi và nhận thông tin từ web worker.
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
}; Khi web worker trả cho ta thông tin, đoạn code trong sự kiện được thực thi. Dữ liệu từ web worker gửi đến được lưu trong event.data.
Hủy Web Worker
Khi đối tượng web worker được tạo ra, nó sẽ tiếp tục hoạt động cho tới khi ta dùng phương thức terminate() để hủy nó:
w.terminate();
Ví dụ Web Worker hoàn chỉnh
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</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;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html> Theo khoapham.vn
Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies
Công cụ Keyword tool trong chiến dịch Quảng cáo Google Adwords không xa lạ trong cộng đồng SEO – SEM. Chúng tôi giới thiệu các chức năng trong Keyword tool giúp cho những người mới hiểu hết chức năng và chọn được một danh sách từ khóa quảng cáo hiệu quả.
Ở phiên bản hệ điều hành iOS 5 dành cho iPad, bàn phím ảo có thể tách ra làm đôi. Tuy nhiên, có một số phím ẩn đã được Apple tích hợp thêm vào.
Theo lái xe của công ty du lịch Đức Minh chở đoàn từ khách sạn Topas về thành phố Lào Cai từ 8 giờ 30 phút nhưng do yêu cầu đi chậm nên 10 giờ 30 đoàn mới tới vị trí...
