setTimeout() clearTimeout() and setInterval() Functions

setTimeout() clearTimeout() and setInterval(): JavaScript एक Single Threaded Language है। यानी इसमें एक बार में केवल एक ही Code को Interpret किया जा सकता है, लेकिन ये हमें Timeouts व Intervals दो ऐसी सुविधाऐं प्रदान करता है, जिनका प्रयोग करके हम अपने Codes के Execution की Scheduling कर सकते हैं।

Timeouts ऐसी सुविधा है, जिसमें हमारा JavaScript Code Specify किए गए समय के बाद Automatically Execute हो जाता है। जबकि Intervals सुविधा द्वारा हम किसी Code को निश्चित समयावधि के Interval पर बार-बार Execute कर सकते हैं।

किसी Code को एक निश्चित समयावधि के बाद Automatically Execute करने के लिए हम Web Browser के window Object के setTimeout() Method को उपयोग में ले सकते हैं। ये Method Parameter के रूप में दो Arguments Accept करता है, जहां पहला Argument वह Code होता है, जिसे Execute होना है,

जबकि दूसरा Argument Milliseconds में वह समयावधि होता है, जितने समय के बाद पहले Argument के रूप में Specify किए गए Code को Execute होना है। इस Method को हम निम्नानुसार उपयोग में ले सकते हैं:

>>> setTimeout("console.log('Hello')", 3000);

जब इस Code को Console Window में Type करके Run किया जाता है, तो Console Window में तुरन्त ही “Hello” Print नहीं हो जाता, बल्कि इस Code को Run करने के 3 Second बाद “Hello” Print होता है। यानी setTimeout() Method द्वारा हम Execute होने वाले Code की Time Scheduling कर सकते हैं।

यदि हम उपरोक्त Code को ही निम्नानुसार Modify करते हुए setTimeout() Method के स्थान पर setInterval() Method को Specify कर दें व दूसरे Parameter के रूप में 1000 Specify कर दें:

>>> setInterval("console.log('Hello')", 1000);

तो इस Code को Execute करने पर ये Code Console Window में हर एक Second के बाद “Hello” Message Print करता है और तब तक इसी Code को बार-बार Run करता रहता है, जब तक कि हम Current Web Page को Reload न कर दें अथवा Web Browser को Close न कर दें। सामान्‍यत: इन दोनों Methods को Use करके JavaScript में विभिन्न प्रकार के Animations Create किए जाते हैं।

एक बार किसी Code को Run करने के लिए setTimeout() Method का प्रयोग करके यदि Schedule कर दिया जाए और फिर किसी कारणवश यदि हमें किसी विशेष परिस्थिति में उस Code को Execute होने से पहले ही रोकना हो, तो हम setTimeout() Method को Cancel करने के लिए clearTimeout() Method को Use कर सकते हैं। जबकि setInterval() Method के Execution को रोकने के लिए हमें clearInterval() Method को Use करना होता है।

setTimeout() व setInterval() दोनों ही Methods Execute होते समय अपना एक Unique ID Return करते हैं। इस ID को किसी Variable में Store करके उन IDs को ही clearTimeout() या clearInterval() Method में Parameter के रूप में Pass किया जाता है। ये दोनों Methods उन Codes को Execute होने से रोक देते हैं, जिनका ID इनमें Parameter के रूप में Pass किया गया होता है।

setTimeout() व setInterval() Methods को Use करते समय हमें पहले Parameter के रूप में Executable Code को एक String के रूप में Specify करने के स्थान पर एक Anonymous Function के रूप में Specify करना चाहिए। यानी यदि हम उपरोक्त Code को ही उपयोग में लेना चाहें, तो हमें वही Code निम्नानुसार लिखना चाहिए-

>>> setTimeout(function(){console.log('Hello')}, 3000);
>>> setInterval(function(){console.log('Hello')}, 1000);

हालांकि उपरोक्त दोनों Codes पिछले वाले दोनों Codes की तुलना में काफी अच्छे हैं, लेकिन फिर भी ये दोनों ही Codes एक बार Execute होने के लिए Schedule हो गए, तो इन्हें किसी भी स्थिति में रोका नहीं जा सकता।

क्योंकि ये दोनों ही Methods जब Execute होते हैं, तो अपने Code का एक Unique ID Return करते हैं और उस Unique ID को जब तक हम किसी Variable में Store न करें, तब तक हम इन Codes को clearTimeout() या clearInterval() Method में Parameter के रूप में Pass करके इन्हें रोक नहीं सकते। इसलिए वास्तव में हमें उपरोक्त Code को भी निम्नानुसार लिखना चाहिए:

>>> var id1 = setTimeout(function(){console.log('Hello')}, 3000);
>>> var id2 = setInterval(function(){console.log('Hello')}, 1000);

अब ये Codes पूरी तरह से Controllable हैं। यदि किसी विशिष्‍ट परिस्थिति में हमें उपरोक्त Codes को Execute होने से रोकना हो तो हम ये काम निम्नानुसार clearTimeout() व clearInterval() Methods का प्रयोग करके कर सकते हैं:

>>> setTimeout(function(){console.log('Hello')}, 3000);
clearTimeout(id1);

>>> setInterval(function(){console.log('Hello')}, 1000);
clearInterval(id2);

setTimeout() व setInterval() Functions को DOM Styles व DOM Events के साथ Property Use करके ही JavaScript के माध्‍यम से Web Pages में विभिन्न प्रकार के Animations Define किए जाते हैं।

लेकिन Pure JavaScript का प्रयोग करते हुए विभिन्न प्रकार के Animations Create करने के लिए बहुत सारी बातों का ध्‍यान रखना होता है क्योंकि सभी DOM Methods को सभी Web Browsers समान रूप से Support नहीं करते।

इसलिए सामान्‍यत: सामान्‍य प्रकार की ज्यादातर जरूरतों को पूरा करने के लिए हम Pure JavaScript का प्रयोग करने के स्थान पर बडी ही आसानी से jQuery, DOJO, YUI जैसे JavaScript Library यानी JavaScript Frameworks का प्रयोग कर सकते हैं क्योंकि इन Frameworks को Pure JavaScript में ही Design किया गया है और ये काफी Mature Frameworks हैं।

इसलिए इन Frameworks को Use करके हम वास्तव में अपने समय की बचत ही रहे होते हैं। क्योंकि जिन कामों को हम Pure JavaScript का प्रयोग करने के लिए अपने स्वयं के Cross-Browser Functions Create करेंगे, उन Functions को इन Libraries के रूप में पहले से ही Define किया जा चुका है, जिन्हें हम बिना किसी परेशानी के बडी ही आसानी से Reuse कर सकते हैं।

लेकिन इसका मतलब ये नहीं है कि हमें JavaScript को ठीक से समझने की जरूरत नहीं है। वास्तव में ये सभी Frameworks JavaScript पर ही आधारित हैं, इसलिए यदि हम JavaScript के विभिन्न Fundamentals को समझ लें, तो हमें इन Frameworks की Internal Working को समझने में काफी मदद मिलती है, जिसकी वजह से हम इन Frameworks को ज्यादा बेहतर तरीके से Use करने में सक्षम हो जाते हैं।