जावास्क्रिप्ट में मल्टी-थ्रेडिंग और एसिंक्रोनस करने का अलग तरीका
एचटीएमएल 5 जावास्क्रिप्ट से पहले केवल प्रति पृष्ठ एक धागे के निष्पादन की अनुमति दी गई थी।
कुछ hacky तरीके के साथ एक अतुल्यकालिक निष्पादन अनुकरण करने के लिए हुई थी यील्ड , setTimeout(), setInterval(), XMLHttpRequestया ईवेंट हैंडलर्स (इस पोस्ट के अंत के साथ एक उदाहरण के लिए देखें उपज औरsetTimeout() )।
लेकिन HTML5 के साथ अब हम फ़ंक्शन के निष्पादन को समानांतर करने के लिए वर्कर थ्रेड्स का उपयोग कर सकते हैं। यहाँ उपयोग का एक उदाहरण है।
असली मल्टी थ्रेडिंग
मल्टी-थ्रेडिंग: जावास्क्रिप्ट वर्कर थ्रेड्स
HTML5 ने वेब वर्कर थ्रेड्स देखें (देखें: ब्राउज़र कॉम्पिटिशन )
नोट: IE9 और पुराने संस्करण इसका समर्थन नहीं करते हैं।
ये वर्कर थ्रेड जावास्क्रिप्ट थ्रेड होते हैं जो पृष्ठ के प्रदर्शन को प्रभावित किए बिना पृष्ठभूमि में चलते हैं। वेब वर्कर के बारे में अधिक जानकारी के लिए प्रलेखन या इस ट्यूटोरियल को पढ़ें ।
यहां 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 आमतौर पर मुख्य पृष्ठ के रूप में एक ही थ्रेड / प्रक्रिया में चलते हैं (लेकिन फ़ायरफ़ॉक्स और क्रोमियम इसे अलग तरह से संभालते हैं)।
चूंकि कोड स्निपेट एकाधिक HTML फ़ाइलों का समर्थन नहीं करता है, इसलिए मैं यहां विभिन्न कोड प्रदान करूंगा:
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()एक के बाद एक फंक्शन को अंजाम देना होगा:
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>
जैसा कि आप देख सकते हैं यह दूसरी विधि बहुत धीमी है और ब्राउज़र को जमा देता है क्योंकि यह फ़ंक्शन को निष्पादित करने के लिए मुख्य थ्रेड का उपयोग करता है।
एकल-धागा: उपज के साथ जावास्क्रिप्ट संगामिति का अनुकरण करें
यील्ड ईसीएमएस्क्रिप्ट 6 में एक नई विशेषता है, यह केवल फ़ायरफ़ॉक्स और क्रोम के सबसे पुराने संस्करण पर काम करता है (क्रोम में आपको क्रोम में दिखाई देने वाले प्रायोगिक जावास्क्रिप्ट को सक्षम करने की आवश्यकता है : // झंडे / # सक्षम-जावास्क्रिप्ट-सद्भाव )।
उपज कीवर्ड जनरेटर फ़ंक्शन को विराम देने का कारण बनता है और उपज कीवर्ड के बाद अभिव्यक्ति का मूल्य जनरेटर के कॉलर को वापस कर दिया जाता है। इसे रिटर्न कीवर्ड के एक जनरेटर-आधारित संस्करण के रूप में सोचा जा सकता है।
एक जनरेटर आपको किसी फ़ंक्शन के निष्पादन को निलंबित करने और बाद में इसे फिर से शुरू करने की अनुमति देता है। एक जनरेटर को आपके कार्यों को शेड्यूल करने के लिए इस्तेमाल किया जा सकता है जिसे तकनीक कहा जाता है ट्रम्पोलिनिंग ।
यहाँ उदाहरण है:
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>