Web Workers API
فهرست مطالب
.ﺩﺭﺍﺬﮕﺑ ﺮﯿﺛﺄﺗ ﻪﺤﻔﺻ ﺩﺮﮑﻠﻤﻋ ﺮﺑ ﻪﮑﻨﯾﺍ ﻥﻭﺪﺑ ،ﺩﻮﺷﯽﻣ ﺍﺮﺟﺍ ﻪﻨﯿﻣﺯﺲﭘ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﺖﭙﯾﺮﮑ
Web Worker ؟ﺖﺴﯿﭼ
.ﺩﻮﺷ ﯽﻤﻧ ﻮﮕﺨﺳﺎﭘ ﺪﺳﺮﺑ ﻥﺎﯾﺎﭘ ﻪﺑ ﺖﭙﯾﺮﮑﺳﺍ ﻪﮐ ﯽﻧﺎﻣﺯ ﺎﺗ ﻪﺤﻔﺻ ،HTML ﻪﺤﻔﺻ ﮏﯾ ﺭﺩ ﺎﻫ ﺖﭙﯾﺮﮑﺳﺍ ﯼﺍ
ﺩﻮﺷ ﯽﻣ ﺍﺮﺟﺍ ﻪﻨﯿﻣﺯ ﺲﭘ ﺭﺩ ﻞﻘﺘﺴﻣ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺖﺳﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﮏﯾ ﺮﮔﺭﺎﮐ ﺏﻭ
ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ
:ﺪﻨﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ Web Workers ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﯼﺎﻫ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ
| Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
| Jan 2010 | Sep 2012 | Jun 2009 | Jun 2009 | Jun 2011 |
Web Workers ﻪﻧﻮﻤﻧ
:ﺩﺭﺎﻤﺷ ﯽﻣ ﻪﻨﯿﻣﺯ ﺲﭘ ﺭﺩ ﺍﺭ ﺩﺍﺪﻋﺍ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﻩﺩﺎﺳ ﺮﮔﺭﺎﮐ ﺏﻭ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ
ﻝﺎﺜﻣ
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ Web Worker ﻞﯾﺎﻓ ﮏﯾ
.ﻢﯿﻨﮐ ﺩﺎﺠﯾﺍ ﯽﺟﺭﺎﺧ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﮏﯾ ﺭﺩ ﺍﺭ ﺩﻮﺧ ﺮﮔﺭﺎﮐ ﺏﻭ ﺪﯿﯾﺎﯿﺑ ،ﻥﻮﻨﮐﺍ
:ﺩﻮﺷ ﯽﻣ ﻩﺮﯿﺧﺫ "demo_workers.js" ﻞﯾﺎﻓ ﺭﺩ ﺖﭙﯾﺮﮑﺳﺍ .ﺪﯾﺁ ﯽﻣ ﺏﺎﺴﺣ ﻪﺑ ﻪﮐ ﻢﯿﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﺖﭙﯾﺮ
let i = 0;
function timedCount()
{
i ++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ HTML ﻪﺤﻔﺻ ﻪﺑ ﻡﺎﯿﭘ ﮏﯾ ﻝﺎﺳﺭﺍ ﯼﺍﺮﺑ ﻪﮐ - ﺖﺳﺍ po
ﻪﺟﻮﺗ: ﺏﻭ ﻻًﻮﻤﻌﻣﺖﭙﯾﺮﮑﺳﺍ ﻦﯿﻨﭼ ﯼﺍﺮﺑ ﺎﻫﺮﮔﺭﺎﮐﻩﺩﺎﺳ ﯼﺎﻫﯽﻤﻧ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍu2
ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ Web Worker ﺖﮑﺠﺑﺁ ﮏﯾ
.ﻢﯿﻨﮐ ﯽﻧﺍﻮﺧﺍﺮﻓ HTML ﻪﺤﻔﺻ ﮏﯾ ﺯﺍ ﺍﺭ ﻥﺁ ﺪﯾﺎﺑ ،ﻢﯾﺭﺍﺩ ﺍﺭ web worker ﻞﯾﺎﻓ ﻪﮐ ﻥﻮﻨﮐﺍ
.ﺪﻨﮐ ﯽﻣ ﺍﺮﺟﺍ ﻥﺁ ﺭﺩ ﺍﺭ ﺪﮐ ﻭ ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﺪﯾﺪﺟ ﺮﮔﺭﺎﮐ ﺏﻭ ءﯽﺷ ﮏﯾ - ﻪﻧ ﺎﯾ ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﻼًﺒﻗ ﺮﮔ
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}.ﻢﯿﻨﮐ ﺖﻓﺎﯾﺭﺩ ﻭ ﻝﺎﺳﺭﺍ ﻡﺎﯿﭘ ﺮﮔﺭﺎﮐ ﺏﻭ ﺯﺍ ﻢﯿﻧﺍﻮﺗ ﯽﻣ ﺲﭙﺳ
.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﮔﺭﺎﮐ ﺏﻭ ﻪﺑ ﺍﺭ "onmessage" ﺩﺍﺪﯾﻭﺭ ﻩﺪﻧﻮﻨﺷ ﮏﯾ
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};ﻩﺩﺍﺩ .ﺩﻮﺷﯽﻣ ﺍﺮﺟﺍ ﺩﺍﺪﯾﻭﺭ ﻩﺪﻧﻮﻨﺷ ﻥﻭﺭﺩ ﺪﮐ ،ﺪﻨﮐﯽﻣ ﻝﺎﺳﺭﺍ ﺍﺭ ﯽﻣﺎﯿﭘ ﺮﮔﺭﺎﮐﺏﻭ ﻪ
ﺪﯿﻫﺩ ﻪﻤﺗﺎﺧ ﺍﺭ Web Worker ﮏﯾ
.ﺪﺑﺎﯾ ﻥﺎﯾﺎﭘ ﻪﮐ ﯽﻧﺎﻣﺯ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻪﻣﺍﺩﺍ (ﯽﺟﺭﺎﺧ ﺖﭙﯾﺮﮑﺳﺍ ﻡﺎﻤﺗﺍ ﺯﺍ ﺲﭘ ﯽﺘﺣ) ﺎﻫ ﻡﺎﯿﭘ ﻪﺑ ﻥﺩﺍﺩ
ﺯﺍ ،ﻪﻧﺎﯾﺍﺭ/ﺮﮔﺭﻭﺮﻣ ﻥﺎﮕﯾﺍﺭ ﻊﺑﺎﻨﻣ ﻭ ﺮﮔﺭﺎﮐ ﺏﻭ ﻪﺑ ﻥﺩﺍﺩ ﻪﻤﺗﺎﺧ ﯼﺍﺮﺑ
w.terminate();Web Worker ﺯﺍ ﺩﺪﺠﻣ ﻩﺩﺎﻔﺘﺳﺍ
،ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ undefined ﯼﻭﺭ ﻦﺘﻓﺎﯾ ﻥﺎﯾﺎﭘ ﺯﺍ ﺲﭘ ﺍﺭ ﺮﮔﺭﺎﮐ ﺮﯿﻐﺘﻣ ﺮﮔﺍ
w = undefined;Full Web Worker ﻝﺎﺜﻣ ﺪﮐ
:ﺖﺳﺍ ﻩﺪﻣﺁ HTML ﻪﺤﻔﺻ ﺪﮐ ﺮﯾﺯ ﺭﺩ .ﻢﯾﺍ ﻩﺩﺮﮐ ﻩﺪﻫﺎﺸﻣ js ﻞﯾﺎﻓ ﺭﺩ ﺍﺭ Worker ﺪﮐ ﻼًﺒﻗ
ﻝﺎﺜﻣ
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker()
{
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Workers ﻭ DOM
:ﺪﻧﺭﺍﺪﻧ ﯽﺳﺮﺘﺳﺩ ﺮﯾﺯ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ءﺎﯿﺷﺍ ﻪﺑ ،ﺪﻨﺘﺴﻫ ﯽﺟﺭﺎﺧ ﯼﺎﻫ ﻞﯾﺎﻓ ﺭﺩ ﺏﻭ ﻥﺍﺪﻨﻣﺭﺎﮐ ﻪﮐ ﯽﯾﺎﺠ
ﻩﺮﺠﻨﭘ ﯽﺷ
ﺪﻨﺳ ﯽﺷ
ﺪﻟﺍﻭ ﯽﺷ