जेएस ट्यूटोरियल

जेएस होम जे एस परिचय जे एस कहाँ करने के लिए जेएस आउटपुट जेएस स्टेटमेंट्स जेएस सिंटेक्स जे एस टिप्पणियाँ जेएस चर जे एस लेट जेएस कॉन्स्ट जेएस ऑपरेटर्स जे एस अंकगणित जेएस असाइनमेंट जेएस डेटा प्रकार जे एस कार्य जेएस ऑब्जेक्ट्स जेएस इवेंट्स जे एस स्ट्रिंग्स जे एस स्ट्रिंग तरीके जे एस स्ट्रिंग खोज जे एस स्ट्रिंग टेम्पलेट्स जेएस नंबर जेएस संख्या के तरीके जे एस सरणी जेएस सरणी के तरीके जेएस ऐरे सॉर्ट जेएस सरणी पुनरावृत्ति जेएस ऐरे कॉन्स्ट जे एस तिथियाँ जेएस तिथि प्रारूप जेएस तिथि प्राप्त करने के तरीके JS दिनांक सेट विधियाँ जे एस मठ जे एस रैंडम जे एस बूलियन्स जेएस तुलना जे एस शर्तें जे एस स्विच जेएस लूप फॉर In . के लिए JS लूप ओएफ के लिए जेएस लूप जेएस लूप जबकि जेएस ब्रेक जेएस Iterables जेएस सेट जेएस मैप्स जेएस टाइपोफ जे एस प्रकार रूपांतरण जेएस बिटवाइज जेएस रेगएक्सपी जे एस त्रुटियाँ जेएस स्कोप जे एस उत्थापन जेएस सख्त मोड जेएस यह कीवर्ड जेएस एरो फंक्शन जेएस क्लासेस जेएस JSON जेएस डिबगिंग जेएस स्टाइल गाइड जेएस सर्वोत्तम अभ्यास जेएस गलतियाँ जेएस प्रदर्शन जेएस आरक्षित शब्द

जेएस संस्करण

जेएस संस्करण जेएस 2009 (ES5) जेएस 2015 (ईएस6) जेएस 2016 जेएस 2017 जेएस 2018 जेएस आईई / एज जेएस इतिहास

जेएस ऑब्जेक्ट्स

वस्तु परिभाषाएँ वस्तु गुण वस्तु के तरीके वस्तु प्रदर्शन ऑब्जेक्ट एक्सेसर्स वस्तु निर्माता वस्तु प्रोटोटाइप वस्तु पुनरावर्तनीय वस्तु समूह वस्तु मानचित्र वस्तु संदर्भ

जे एस कार्य

फ़ंक्शन परिभाषाएँ फंक्शन पैरामीटर्स समारोह आमंत्रण फंक्शन कॉल समारोह लागू करें फंक्शन क्लोजर

जेएस क्लासेस

कक्षा परिचय वर्ग वंशानुक्रम क्लास स्टेटिक

जे एस एसिंक

जेएस कॉलबैक जे एस अतुल्यकालिक जे एस वादा जे एस एसिंक/प्रतीक्षा

जेएस एचटीएमएल डोम

डोम परिचय डोम तरीके डोम दस्तावेज़ डोम तत्व डोम एचटीएमएल डोम फॉर्म डोम सीएसएस डोम एनिमेशन डोम घटनाक्रम डोम इवेंट श्रोता डोम नेविगेशन डोम नोड्स डोम संग्रह डोम नोड सूचियाँ

जेएस ब्राउज़र बीओएम

जेएस विंडो जेएस स्क्रीन जेएस स्थान जेएस इतिहास जेएस नेविगेटर जेएस पॉपअप अलर्ट जेएस टाइमिंग जे एस कुकीज़

जेएस वेब एपीआई

वेब एपीआई परिचय वेब फॉर्म एपीआई वेब इतिहास एपीआई वेब संग्रहण API वेब वर्कर एपीआई वेब फ़ेच एपीआई वेब जियोलोकेशन एपीआई

जे एस अजाक्स

AJAX परिचय अजाक्स एक्सएमएलएचटीपी अजाक्स अनुरोध अजाक्स प्रतिक्रिया अजाक्स एक्सएमएल फ़ाइल अजाक्स पीएचपी अजाक्स एएसपी AJAX डेटाबेस अजाक्स अनुप्रयोग अजाक्स उदाहरण

जेएस JSON

JSON परिचय JSON सिंटैक्स जेएसओएन बनाम एक्सएमएल JSON डेटा प्रकार JSON पार्स JSON स्ट्रिंगिफ़ाई JSON ऑब्जेक्ट्स JSON सरणियाँ JSON सर्वर जेएसओएन पीएचपी जेएसओएन एचटीएमएल जेएसओएन जेएसओएनपी

जेएस बनाम jQuery

jQuery चयनकर्ता jQuery एचटीएमएल jQuery सीएसएस jQuery डोम

जेएस ग्राफिक्स

जेएस ग्राफिक्स जेएस कैनवास जे एस प्लॉटली जेएस चार्ट.जेएस जेएस गूगल चार्ट जेएस डी3.जेएस

जेएस उदाहरण

जेएस उदाहरण जेएस एचटीएमएल डोम जेएस एचटीएमएल इनपुट जेएस एचटीएमएल ऑब्जेक्ट्स जेएस एचटीएमएल इवेंट्स जेएस ब्राउज़र जे एस संपादक जे एस व्यायाम जे एस प्रश्नोत्तरी जेएस प्रमाणपत्र

जे एस संदर्भ

जावास्क्रिप्ट ऑब्जेक्ट्स एचटीएमएल डोम ऑब्जेक्ट्स


अतुल्यकालिक जावास्क्रिप्ट

"मैं बाद में समाप्त करूँगा!"

अन्य कार्यों के समानांतर चलने वाले कार्यों को अतुल्यकालिक कहा जाता है

एक अच्छा उदाहरण है जावास्क्रिप्ट सेटटाइमआउट ()

अतुल्यकालिक जावास्क्रिप्ट

पिछले अध्याय में उपयोग किए गए उदाहरण बहुत सरल थे।

उदाहरणों का उद्देश्य कॉलबैक फ़ंक्शंस के सिंटैक्स को प्रदर्शित करना था:

उदाहरण

function myDisplayer(something) {
  document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

उपरोक्त उदाहरण में, myDisplayerएक फ़ंक्शन का नाम है।

myCalculator()इसे तर्क के रूप में पारित किया जाता है।

वास्तविक दुनिया में, कॉलबैक का उपयोग अक्सर अतुल्यकालिक कार्यों के साथ किया जाता है।

एक विशिष्ट उदाहरण जावास्क्रिप्ट है setTimeout()


एक टाइमआउट की प्रतीक्षा में

जावास्क्रिप्ट फ़ंक्शन का उपयोग करते समय setTimeout(), आप टाइम-आउट पर निष्पादित करने के लिए कॉलबैक फ़ंक्शन निर्दिष्ट कर सकते हैं:

उदाहरण

setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

उपरोक्त उदाहरण में, myFunctionकॉलबैक के रूप में उपयोग किया जाता है।

myFunctionsetTimeout()तर्क के रूप में पारित किया जाता है।

3000 टाइम-आउट से पहले मिलीसेकंड की संख्या है, इसलिए myFunction()3 सेकंड के बाद कॉल किया जाएगा।

जब आप किसी फ़ंक्शन को तर्क के रूप में पास करते हैं, तो याद रखें कि कोष्ठक का उपयोग न करें।

दाएं: सेटटाइमआउट (myFunction, 3000);

गलत:सेटटाइमआउट (myFunction (), 3000);

किसी फ़ंक्शन के नाम को किसी अन्य फ़ंक्शन के तर्क के रूप में पास करने के बजाय, आप इसके बजाय हमेशा एक संपूर्ण फ़ंक्शन पास कर सकते हैं:

उदाहरण

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

उपरोक्त उदाहरण में, function(){ myFunction("I love You !!!"); } कॉलबैक के रूप में उपयोग किया जाता है। यह एक पूर्ण कार्य है। पूरा फ़ंक्शन एक तर्क के रूप में सेटटाइमआउट () को पास किया जाता है।

3000 टाइम-आउट से पहले मिलीसेकंड की संख्या है, इसलिए myFunction()3 सेकंड के बाद कॉल किया जाएगा।


अंतराल की प्रतीक्षा में:

जावास्क्रिप्ट फ़ंक्शन का उपयोग करते समय setInterval(), आप प्रत्येक अंतराल के लिए निष्पादित किए जाने वाले कॉलबैक फ़ंक्शन को निर्दिष्ट कर सकते हैं:

उदाहरण

setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

उपरोक्त उदाहरण में, myFunctionकॉलबैक के रूप में उपयोग किया जाता है।

myFunctionsetInterval()तर्क के रूप में पारित किया जाता है।

1000 अंतराल के बीच मिलीसेकंड की संख्या है, इसलिए myFunction()इसे हर सेकंड कहा जाएगा।


फाइलों का इंतजार

यदि आप किसी बाहरी संसाधन (जैसे स्क्रिप्ट या फ़ाइल) को लोड करने के लिए कोई फ़ंक्शन बनाते हैं, तो आप सामग्री के पूरी तरह लोड होने से पहले उसका उपयोग नहीं कर सकते।

कॉलबैक का उपयोग करने का यह सही समय है।

यह उदाहरण एक HTML फ़ाइल ( mycar.html) को लोड करता है, और फ़ाइल के पूरी तरह से लोड होने के बाद HTML फ़ाइल को वेब पेज में प्रदर्शित करता है:

फ़ाइल की प्रतीक्षा में:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);

उपरोक्त उदाहरण में, myDisplayerकॉलबैक के रूप में उपयोग किया जाता है।

myDisplayergetFile()तर्क के रूप में पारित किया जाता है।

नीचे इसकी एक प्रति है mycar.html:

mycar.html


<img src="img_car.jpg" alt="Nice car" style="width:100%">

<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels.</p>

<p>(Wikipedia)</p>