জাভাস্ক্রিপ্টে মাল্টি-থ্রেডিং এবং অ্যাসিঙ্ক্রোনাস করার বিভিন্ন উপায়
এইচটিএমএল 5 এর আগে জাভাস্ক্রিপ্ট কেবল প্রতি পৃষ্ঠায় একটি থ্রেড কার্যকর করার অনুমতি দেয়।
কিছু হল hacky পথ সঙ্গে একটি অ্যাসিঙ্ক্রোনাস সঞ্চালনের অনুকরণ ছিল ইল্ড , setTimeout(), setInterval(), XMLHttpRequestবা ইভেন্ট হ্যান্ডলার (সঙ্গে একটি উদাহরণ জন্য এই পোস্টের শেষে দেখুন ফলন এবং setTimeout())।
তবে এইচটিএমএল 5 এর সাথে আমরা এখন কর্মের থ্রেডগুলি ফাংশনগুলির সম্পাদনের সমান্তরালে ব্যবহার করতে পারি। এখানে ব্যবহারের একটি উদাহরণ রয়েছে।
রিয়েল মাল্টি থ্রেডিং
মাল্টি-থ্রেডিং: জাভাস্ক্রিপ্ট কর্মী থ্রেডস
এইচটিএমএল 5 ওয়েব ওয়ার্কারের থ্রেডগুলি প্রবর্তন করেছে (দেখুন: ব্রাউজারগুলির সামঞ্জস্যতা )
দ্রষ্টব্য: আই 9 এবং পূর্ববর্তী সংস্করণগুলি এটি সমর্থন করে না।
এই কর্মী থ্রেডগুলি জাভাস্ক্রিপ্ট থ্রেড যা পৃষ্ঠার কার্যকারিতা প্রভাবিত না করে পটভূমিতে চলে। ওয়েব কর্মী সম্পর্কে আরও তথ্যের জন্য ডকুমেন্টেশন বা এই টিউটোরিয়ালটি পড়ুন ।
এখানে 3 ওয়েব কর্মী থ্রেড সহ একটি সাধারণ উদাহরণ যা MAX_VALUE গণনা করে এবং আমাদের পৃষ্ঠায় বর্তমান গণিত মান দেখায়:
//As a worker normally take another JavaScript file to execute we convert the function in an URL: http://stackoverflow.com/a/16799132/2576706
function getScriptPath(foo){ return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]],{type:'text/javascript'})); }
var MAX_VALUE = 10000;
/*
* Here are the workers
*/
//Worker 1
var worker1 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
//We add a listener to the worker to get the response and show it in the page
worker1.addEventListener('message', function(e) {
document.getElementById("result1").innerHTML = e.data;
}, false);
//Worker 2
var worker2 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker2.addEventListener('message', function(e) {
document.getElementById("result2").innerHTML = e.data;
}, false);
//Worker 3
var worker3 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker3.addEventListener('message', function(e) {
document.getElementById("result3").innerHTML = e.data;
}, false);
// Start and send data to our worker.
worker1.postMessage(MAX_VALUE);
worker2.postMessage(MAX_VALUE);
worker3.postMessage(MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
আমরা দেখতে পাচ্ছি যে তিনটি থ্রেড একযোগে কার্যকর করা হয়েছে এবং পৃষ্ঠাতে তাদের বর্তমান মান মুদ্রণ করে। তারা পৃষ্ঠাটি হিমায়িত করে না কারণ তারা পৃথক থ্রেড সহ পটভূমিতে কার্যকর করা হয়।
একাধিক থ্রেডিং: একাধিক iframes সহ
এটি অর্জনের আরেকটি উপায় হ'ল একাধিক আইফ্রেম ব্যবহার করা , প্রত্যেকে একটি থ্রেড কার্যকর করবে। আমরা ইউআরএল দ্বারা আইফ্রেমে কিছু প্যারামিটার দিতে পারি এবং ফলাফলটি পেতে এবং এটিকে আবার মুদ্রণ করতে ইফ্রেমে তার পিতামাতার সাথে যোগাযোগ করতে পারে ( আইফ্রেমটি অবশ্যই একই ডোমেনে থাকতে হবে)।
এই উদাহরণটি সমস্ত ব্রাউজারে কাজ করে না! iframes সাধারণত মূল পৃষ্ঠা হিসাবে একই থ্রেড / প্রক্রিয়াতে চালিত হয় (তবে ফায়ারফক্স এবং ক্রোমিয়াম এটিকে অন্যরকমভাবে পরিচালনা করে বলে মনে হচ্ছে)।
যেহেতু কোড স্নিপেট একাধিক এইচটিএমএল ফাইলগুলিকে সমর্থন করে না, আমি কেবল এখানে বিভিন্ন কোড সরবরাহ করব:
index.html:
//The 3 iframes containing the code (take the thread id in param)
<iframe id="threadFrame1" src="thread.html?id=1"></iframe>
<iframe id="threadFrame2" src="thread.html?id=2"></iframe>
<iframe id="threadFrame3" src="thread.html?id=3"></iframe>
//Divs that shows the result
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
//This function is called by each iframe
function threadResult(threadId, result) {
document.getElementById("result" + threadId).innerHTML = result;
}
</script>
thread.html:
//Get the parameters in the URL: http://stackoverflow.com/a/1099670/2576706
function getQueryParams(paramName) {
var qs = document.location.search.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params[paramName];
}
//The thread code (get the id from the URL, we can pass other parameters as needed)
var MAX_VALUE = 100000;
(function thread() {
var threadId = getQueryParams('id');
for(var i=0; i<MAX_VALUE; i++){
parent.threadResult(threadId, i);
}
})();
বহু-থ্রেডিং অনুকরণ করুন
একক থ্রেড: সেটটাইমআউট () এর সাথে জাভাস্ক্রিপ্ট সম্মিলন অনুকরণ করুন
'নিষ্পাপ' উপায়টি হ'ল setTimeout()একের পর এক ফাংশনটি সম্পাদন করা :
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
তবে এই পদ্ধতিটি কার্যকর হয় না কারণ প্রতিটি কাজ একের পর এক সম্পাদিত হবে।
ফাংশনটিকে পুনরাবৃত্তভাবে কল করে আমরা অ্যাসিনক্রোনাস এক্সিকিউশনটি অনুকরণ করতে পারি:
var MAX_VALUE = 10000;
function thread1(value, maxValue){
var me = this;
document.getElementById("result1").innerHTML = value;
value++;
//Continue execution
if(value<=maxValue)
setTimeout(function () { me.thread1(value, maxValue); }, 0);
}
function thread2(value, maxValue){
var me = this;
document.getElementById("result2").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread2(value, maxValue); }, 0);
}
function thread3(value, maxValue){
var me = this;
document.getElementById("result3").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread3(value, maxValue); }, 0);
}
thread1(0, MAX_VALUE);
thread2(0, MAX_VALUE);
thread3(0, MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
আপনি দেখতে পাচ্ছেন যে এই দ্বিতীয় পদ্ধতিটি খুব ধীর এবং ব্রাউজারকে হিমশীতল কারণ এটি ফাংশনগুলি সম্পাদন করতে মূল থ্রেডটি ব্যবহার করে।
একক থ্রেড: ফলন সহ জাভাস্ক্রিপ্ট সহকারী নকল করুন
ইল্ড একটি নতুন বৈশিষ্ট্য ECMAScript প্রোগ্রামিং 6 , এটি শুধুমাত্র ফায়ারফক্স এবং Chrome প্রাচীনতম সংস্করণ উপর কাজ করে (যেমন, Chrome আপনি সক্রিয় করতে হবে পরীক্ষামূলক JavaScript প্রদর্শনে ক্রোম: // পতাকা / # সক্ষম-জাভাস্ক্রিপ্ট-সাদৃশ্য )।
ফলন কীওয়ার্ড জেনারেটর ফাংশন এক্সিকিউশনকে বিরতি দেয় এবং ফলন কীওয়ার্ডের পরে প্রকাশের অভিব্যক্তির মান জেনারেটরের কলারে ফিরে আসে। এটি রিটার্ন কীওয়ার্ডের জেনারেটর ভিত্তিক সংস্করণ হিসাবে ভাবা যেতে পারে।
একটি জেনারেটর আপনাকে কোনও ফাংশন সম্পাদন স্থগিত করতে এবং পরে এটি পুনরায় শুরু করার অনুমতি দেয় ume একটি জেনারেটর ট্রাম্পোলাইনিং নামক একটি প্রযুক্তি দিয়ে আপনার ফাংশনগুলি নির্ধারণের জন্য ব্যবহার করা যেতে পারে ।
এখানে উদাহরণ:
var MAX_VALUE = 10000;
Scheduler = {
_tasks: [],
add: function(func){
this._tasks.push(func);
},
start: function(){
var tasks = this._tasks;
var length = tasks.length;
while(length>0){
for(var i=0; i<length; i++){
var res = tasks[i].next();
if(res.done){
tasks.splice(i, 1);
length--;
i--;
}
}
}
}
}
function* updateUI(threadID, maxValue) {
var value = 0;
while(value<=maxValue){
yield document.getElementById("result" + threadID).innerHTML = value;
value++;
}
}
Scheduler.add(updateUI(1, MAX_VALUE));
Scheduler.add(updateUI(2, MAX_VALUE));
Scheduler.add(updateUI(3, MAX_VALUE));
Scheduler.start()
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>