jQuery Callback Functions
In this page:
$(selector).method(arguments, function () {
// callback runs after the method finishes
});Effects को Callbacks की ज़रूरत क्यों है
fadeOut() और slideUp() जैसे jQuery effect methods asynchronous हैं -- किसी को call करना animation शुरू करता है और animation के खत्म होने का इंतज़ार किए बिना तुरंत आपके script की अगली line को control वापस दे देता है। अगर अगली line animation के complete होने पर निर्भर है (जैसे element हटाना या दूसरा animation शुरू करना), तो यह बहुत जल्दी चलेगी जब तक आप एक callback इस्तेमाल न करें।
उदाहरण: Why Effects Need Callbacks
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(1000);
console.log("This runs immediately, before the fade finishes");
</script>
</body>
</html>एक Callback Function Pass करना
एक callback को किसी effect method call के आख़िरी argument के रूप में जोड़ा जाता है -- fadeOut(1000, function() { ... }) -- और fade पूरी तरह खत्म होने पर jQuery automatically उस function को invoke करता है, बिना किसी manual timing या setTimeout की ज़रूरत के।
उदाहरण: Passing a Callback Function
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(1000, function() {
console.log("Fade finished");
});
</script>
</body>
</html>किसी Callback के अंदर this इस्तेमाल करना
किसी callback function के अंदर, this keyword उस specific DOM element को refer करता है जिस पर effect लागू किया गया था, बिल्कुल किसी regular jQuery event handler के अंदर की तरह -- इसे $(this) के साथ wrap करना आपको animation complete होने के बाद उसी element के साथ normal jQuery methods इस्तेमाल करते हुए काम करते रहने देता है।
उदाहरण: Using this Inside a Callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" data-name="mybox">Box</div>
<script>
$("#box").fadeOut(1000, function() {
console.log($(this).data("name"));
});
</script>
</body>
</html>Callbacks के साथ कई Animations Chain करना
पहले effect के callback के अंदर एक दूसरा effect call nest करना एक simple sequence बनाता है: दूसरा animation सिर्फ तभी शुरू होता है जब पहला पूरी तरह खत्म हो चुका हो, आपको एक multi-step animated sequence (जैसे fade out, फिर slide up, फिर remove) बनाने देते हुए जो एक predictable, guaranteed order में चलता है।
उदाहरण: Chaining Multiple Animations with Callbacks
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").slideUp(500, function() {
$(this).fadeIn(500);
});
</script>
</body>
</html>Animation Effects से आगे Callbacks
callback pattern सिर्फ visual effects के लिए unique नहीं है -- कई दूसरी jQuery methods, जैसे $(document).ready(), $.getJSON(), और $.ajax(), भी अपना asynchronous काम खत्म होने पर चलाने के लिए एक function accept करती हैं। यहाँ callbacks समझना सीधे इस course में बाद में covered AJAX requests और deferred objects को समझने में काम आता है।
उदाहरण: Callbacks Beyond Animation Effects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
console.log("DOM ready callback ran");
});
</script>
</body>
</html>- ऐसा code लिखना जो किसी animation call के तुरंत बाद उसके खत्म होने पर निर्भर करता है, उसके callback के अंदर लिखने के बजाय, race conditions पैदा करते हुए।
- यह भूल जाना कि callback के बिना, jQuery किसी effect के लिए रुकता या wait नहीं करता -- आपके script का बाकी हिस्सा animation के साथ parallel में तुरंत चलता रहता है।
- callback function को parentheses के साथ pass करना, जैसे fadeOut(myFunction()), जो jQuery को बाद में call करने के लिए एक reference pass करने के बजाय function को तुरंत call कर देता है।
- एक callback function किसी effect method के आख़िरी argument के रूप में pass की जाती है और उस effect के खत्म होने पर automatically चलती है।
- callback के बिना, किसी effect call के तुरंत बाद वाला code animation पूरी होने के बाद नहीं, तुरंत चल जाता है।
- Callbacks आमतौर पर actions की एक sequence chain करने के लिए इस्तेमाल होते हैं, जैसे दूसरा animation सिर्फ पहले के खत्म होने के बाद चलाना।
jQuery callback functions एक core language feature हैं (कोई browser API नहीं) और jQuery खुद जिस भी browser को support करता है उसमें identically काम करते हैं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: