HTML5 & CSS3 – Web Workers

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Tommy Tran
Mon, 28/01/2013, 21:40 (GMT+7)
0 Bình luận

HTML5 & CSS3 – Web Workers

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

LINK DEMO

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

Tags:

best practices

Bạn thấy bài viết này như thế nào?:

Tommy owner Express Magazine

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