जावास्क्रिप्ट में समय का टुकड़ा कैसे होता है?

Question

या ecmascript लेकिन मुझे आश्चर्य है कि यह वास्तव में कैसे होता है सटीक प्रत्यारोपण पर अधिक निर्भर करता है।

जावास्क्रिप्ट तकनीकी रूप से एकल धागा है।

लेकिन अगर मैं की तरह

$myDIv.animate({ 
    height:"100px" 
}); 

कुछ करना यह कोई फर्क करता है, तो मुझे क्या

ए

$myDIv.animate({ 
    height:"100px" 
}, null, my_cpu_heavy_function); 

या बी

$myDIv.animate({ 
    height:"100px" 
}); 
my_cpu_heavy_function(); 

में क्योंकि पड़ता है दूसरा एनीमेशन wou एलडी सीपीयू भारी समारोह के साथ समय प्रसंस्करण के लिए लड़ रहे हैं और इसलिए एनीमेशन का स्वरूप भुगतना होगा, है ना?

तो क्या जावास्क्रिप्ट कोड के एक सिंक्रोनस ब्लॉक के अंत में निष्पादन बंद कर देता है या क्या यह किसी ब्लॉक को किसी भी यादृच्छिक बिंदु पर काटता है ताकि अन्य ब्लॉक को असीमित रूप से संसाधित किया जा सके?

Answer 1

यह किसी भी फर्क पड़ता है अगर मैं कर ए या बी

हाँ, यह एक फर्क होगा।

दूसरा संस्करण समय प्रसंस्करण के लिए इतना लड़ाई नहीं करता है। my_cpu_heavy_function यह एक बार शुरू होने के बाद सभी प्रोसेसिंग समय पर कब्जा कर लेगा, यह मानते हुए कि यह तुल्यकालिक है।

दूसरे शब्दों में, एक बार थोड़ा सिंक्रोनस कोड शुरू होता है, यह पूर्ण होने तक समाप्त नहीं होता है, भले ही किसी भी समय वाले एसिंक्रोनस कोड को चलाने के लिए निर्धारित किया जा सके। एसिंक कोड हमेशा सिंक्रोनस कोड को पूरा करने के लिए प्रतीक्षा करने के लिए मजबूर किया जाएगा।

तो क्या होगा कि एनीमेशन शुरू हो जाएगा, और इसकी शुरुआत शुरू होगी, लेकिन फिर my_cpu_heavy_function तुरंत शुरू हो जाएगा, और बाकी एनीमेशन को पूरा होने तक अवरुद्ध कर देगा।

Answer 2

जावास्क्रिप्ट में कोई समय स्लाइसिंग नहीं है। जावास्क्रिप्ट एकल थ्रेडेड है (वेब ​​श्रमिकों को छोड़कर जिन्हें हम यहां पर चर्चा नहीं कर रहे हैं)। जावास्क्रिप्ट निष्पादन का एक धागा पूरा होने तक चलता है।

आपके पहले कोड उदाहरण में, एनीमेशन इसकी बात करता है और जब यह पूरी तरह से किया जाता है, तो यह आपके my_cpu_heavy_function पर कॉल करता है।

आपके दूसरे कोड उदाहरण में, एनीमेशन स्वयं शुरू होता है और इसके पहले एनीमेशन चरण के लिए टाइमर सेट करता है। फिर यह वापस आता है और कोड की अगली पंक्ति पर जाता है। एनीमेशन केवल शुरू हुआ है (और कुछ और काम करने के लिए भविष्य में थोड़े समय के लिए टाइमर सेट करें) - यह पूरा नहीं हुआ है। फिर, आपका my_cpu_heavy_function चलता है और यह पूरा होने तक पूरे जावास्क्रिप्ट निष्पादन को हॉग करता है। एनीमेशन बिल्कुल नहीं चलता है जबकि my_cpu_heavy_function चल रहा है। जब यह खत्म हो जाता है, टाइमर घटना जो एनीमेशन सेट आग लगती है और एनीमेशन चलने के बारे में जाएगा।

एनिमेशन समय स्लाइसिंग की तरह "दिखने" लग सकते हैं, लेकिन वे वास्तव में नहीं हैं। jQuery एनिमेशन एनीमेशन में एक कदम आगे बढ़ते हैं और फिर भविष्य में कुछ समय के लिए टाइमर सेट करते हैं और वे सिस्टम पर वापस लौटते हैं। जब उस टाइमर घटना को आग लगती है, तो jQuery एनीमेशन में अगला कदम करता है और इसी तरह।जब एक टाइमर घटना आग लगती है, तो यह टाइमर घटना को जावास्क्रिप्ट ईवेंट कतार में रखती है। यदि कोई जावास्क्रिप्ट वर्तमान में चल रहा है, तो टाइमर कॉलबैक तुरंत शुरू हो गया है। यदि जावास्क्रिप्ट वर्तमान में चल रहा है, तो टाइमर ईवेंट वर्तमान जावास्क्रिप्ट थ्रेड समाप्त होने तक ईवेंट कतार में बस बैठता है। जब वह धागा खत्म हो जाता है, तो जावास्क्रिप्ट घटना कतार में देखता है यह देखने के लिए कि कोई घटना इंतजार कर रही है या नहीं। यदि वहां हैं, तो यह ईवेंट कॉलबैक को कॉल करता है।

ऐसे में, जावास्क्रिप्ट के विभिन्न टुकड़ों के लिए वास्तव में कोई समय नहीं है। चलाने के लिए इच्छित कोड के दो टुकड़े प्रत्येक सीपीयू चक्र नहीं दिए जाते हैं जैसे मूल कोड में असली धागे के साथ होता है। जावास्क्रिप्ट में कोड का एक टुकड़ा तब तक चलता है जब तक यह पूरा नहीं हो जाता है और फिर अगली घटना शुरू की जा सकती है। जावास्क्रिप्ट-आधारित एनिमेशन जैसी चीजों में, टाइम स्लाइसिंग को कुछ हद तक काम करके और कुछ भविष्य के समय के लिए टाइमर सेट करने और सिस्टम पर लौटने के द्वारा कुछ हद तक अनुकरण किया जा सकता है। जैसे ही आप निष्पादन समाप्त करते हैं, जावास्क्रिप्ट का कुछ अन्य भाग चला सकता है, लेकिन यह तब तक चलता रहेगा जब तक यह पूरा नहीं हो जाता है। यदि जावास्क्रिप्ट के सभी टुकड़े केवल काम की छोटी मात्रा में काम करते हैं और फिर अपने अगले काम के लिए टाइमर सेट करते हैं, तो वे सभी सहयोग कर सकते हैं और ऐसा लगता है जैसे समय स्लाइसिंग है, लेकिन यह केवल उन सभी के बीच सहयोग के कारण काम करता है। यदि my_cpu_heavy_function जैसे एक फ़ंक्शन के साथ आता है और थोड़ी देर के लिए सीपीयू को हॉग करता है, तो उस समय कोई और नहीं चलता है। एनीमेशन बंद हो जाएगा जबकि my_cpu_heavy_function चल रहा था।

ब्राउज़र में कुछ ऑपरेशन ब्राउज़र में देशी कोड (जैसे AJAX कॉल, छवियों की लोडिंग इत्यादि ...) द्वारा किए जाते हैं। जावास्क्रिप्ट चल रहा है, जबकि ये एसिंक्रोनस कार्य पृष्ठभूमि में आगे बढ़ सकते हैं, लेकिन जावास्क्रिप्ट निष्पादन के वर्तमान धागे को समाप्त होने तक वे जावास्क्रिप्ट को सूचित नहीं करेंगे और अधिसूचना कॉलबैक के साथ एक नया प्रारंभ किया जा सकता है।

उदाहरण के तौर पर, मान लीजिए कि हमारे पास एक छवि है जो लोड करने के लिए 1 सेकंड लेती है और एक सीपीयू गहन कार्य जिसे चलाने में 5 सेकंड लगते हैं। जब तक longFunctionThatTakesFiveSecondsToRun() चल किया जाता है 5 सेकंड बाद में, ऑनलोड हैंडलर बुलाया नहीं किया जाएगा

var img = new Image(); 
img.onload = function() { 
    alert("image is loaded now"); 
} 
img.src = "xxx.jpg"; 
longFunctionThatTakesFiveSecondsToRun(); 

जब हम इस कोड को चलाने, भले ही छवि केवल 1 सेकंड लेता ब्राउज़र में आंतरिक रूप से लोड करने के लिए: हम तो इस कोड है । इसे तब तक इंतजार करना पड़ता है जब तक कि अधिभार ईवेंट को संसाधित करने से पहले निष्पादन के वर्तमान धागे को पूरा नहीं किया जाता है।

आप जावास्क्रिप्ट ईवेंट कतार और अतुल्यकालिक संचालन के बारे में अधिक जानने के लिए, इन संबंधित जवाब देख चाहते हैं:

How does JavaScript handle AJAX responses in the background?

Race conditions with JavaScript event handling?

Can JS event handlers interrupt execution of another handler?

Do I need to be concerned with race conditions with asynchronous Javascript?