jQuery callback function | SP Foundationbd

Jquery র effect সম্পর্কিত method গুলিতে শেষ প্যারামিটার হিসেবে একটা function পাঠানো যায়। effect শেষ হওয়ার পরেই এই function execute হয়।এই ফাংশনকে callback function  বলে।উদাহরন এরুপ একটি ইফেক্ট সম্পর্কিত মেথড slideDown() এবং slideUp() নিয়ে এটা উদাহরন দিচ্ছি।সাধারনত আমরা এই method দুটি কিভাবে লিখি?

1.slideDown(500);

এভাবে তাইনা?এখন এই ৫০০ হচ্ছে কত গতিতে সে slide নিচে নামাবে,যাইহোক এই প্যারামিটারের পর কমা দিয়ে আমরা কলব্যাক ফাংশন দ্বিতীয় প্যারামিটার হিসেবে পাঠাতে পারি।এবং এই ফাংশনে আপনি অন্য যেকোন কাজ করতে পারেন।সুবিধা হচ্ছে slide নিচে নামা সম্পূর্ন শেষ হবে তারপর এই function execute হওয়া শুরু হবে।যেমন

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title> SP Foundationbd 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>

  1.  

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>

  1. 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.}

  1.  
  2.  

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.});

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