HTML5 & CSS3 – Web Workers

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

Bạn thấy bài viết này như thế nào?: 
Average: 9 (1 vote)
Ảnh của Tommy Tran

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

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
EU ban hành bộ quy tắc bảo vệ thông tin cá nhân

EU ban hành bộ quy tắc bảo vệ thông tin cá nhân

Không nhắm vào chất xám như SOPA hay PIPA, châu Âu đưa ra bộ luật mới để bảo vệ thông tin cá nhân, ảnh hưởng trực tiếp và mạnh mẽ đến những người khổng lồ công nghệ như Google và Facebook.

Những điểm quan trọng trong file Settings.php của Drupal

Những điểm quan trọng trong file Settings.php của Drupal

The settings.php is unique to every site and contains all of the important information that Drupal needs to run.

Export và import Drupal 7 nodes như thế nào ?

Export và import Drupal 7 nodes như thế nào ?

There are lots of ways to export configuration from one Drupal site and import into another; however, there are few ways to do the same with content. Here's a quick tip which has worked well for me.

Công ty diệt chuột T&C

 

Diet con trung