জেকোয়েরি কলব্যাক ফাংশন (jQuery callback function)



জেকোয়েরির ইফেক্ট সম্পর্কিত মেথডগুলিতে শেষ প্যারামিটার হিসেবে একটা ফাংশন পাঠানো যায়।ইফেক্ট শেষ হওয়ার পরেই এই ফাংশন এক্সিকিউট হয়।এই ফাংশনকে কলব্যাক ফাংশন বলে।উদাহরন এরুপ একটি ইফেক্ট সম্পর্কিত মেথড slideDown() এবং slideUp() নিয়ে এটা উদাহরন দিচ্ছি।সাধারনত আমরা এই মেথডদুটি কিভাবে লিখি?
1.slideDown(500);
এভাবে তাইনা?এখন এই ৫০০ হচ্ছে কত গতিতে সে স্লাইড নিচে নামাবে,যাইহোক এই প্যারামিটারের পর কমা দিয়ে আমরা কলব্যাক ফাংশন দ্বিতীয় প্যারামিটার হিসেবে পাঠাতে পারি।এবং এই ফাংশনে আপনি অন্য যেকোন কাজ করতে পারেন।সুবিধা হচ্ছে স্লাইড নিচে নামা সম্পূর্ন শেষ হবে তারপর এই ফাংশন এক্সিকিউট হওয়া শুরু হবে।যেমন
index.html ফাইল
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title>Webcoachbd Callback function tutorials</title>
05.<link rel="stylesheet" href="/style.css" type="text/css" />
06.<script src="/jquery_latest.js" type="text/javascript"></script>
07.<script src="/script.js" type="text/javascript"></script>
08.</head>
09. 
10.<body>
11.<div id="content_pane">
12.<h3>Information</h3>
13.<p id="shower" class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx.</p>
14. 
15. 
16.<h3>Metadata</h3>
17.<p class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx2.</p>
18.</div>
19.</body>
20.</html>
css ফাইল
01.body{
02.font-family:Verdana;
03.font-size:13px;
04.}
05.#content_pane{
06.width:400px;
07.margin:0 auto;
08.overflow:hidden;
09.border:1px solid #ccc;
10.border-radius:5px;
11.padding:10px;
12.}
13.h3{
14.text-align:center;
15.padding:5px;
16.background:#ddd;
17.border:1px solid #ccc;
18.cursor:pointer;
19.}
20. 
21. 
22..pane_toggler{
23.display:none;
24.}
script.js ফাইল
01.$(document).ready(function(){
02.$('#shower').show();
03.$('h3').click(function(){
04.$(this).next().slideUp(500,function(){
05.var test = $(this).next().next().text();
06.if(test == ''){
07.$('#shower').slideDown('slow');
08.}else{
09.$(this).next().next().slideDown('slow');
10.}
11.});
12.});
13.});
আউটপুট:

Information

Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx.

Metadata

ব্যাখ্যা:এখানে ৪ নম্বল লাইনে দেখুন আমি প্রথম প্যারামিটার দিয়েছি ৫০০ এবং এরপরের প্যারামিটারটি একটি ফাংশন।এই ফাংশনে আমি আমার ইচ্ছেমত প্রয়োজন মত কোড লিখেছি।যদি এভাবে এই কলব্যাক ফাংশন ব্যবহার না করে slideUp এরপর slideDown বা অন্য যেকোন মেথড ইত্যাদি ব্যবহার করতাম তাহলে সমস্যা হত,পরীক্ষা করে দেখতে পারেন।

0 মন্তব্য(গুলি):