تابع callback در jquery

خانه » بلاگ » jquery » تابع callback در jquery

مفهوم تابع Callback در جاوا اسکریپت

کدهای جاوا اسکریپت خط به خط اجرا می شوند، اما از آن جایی که کدهای جی کوئری طول می کشد تا اعمال شوند ممکن است خط بعدی اجرا شود در حالی که کد قبلی هنوز در حال اجراست. برای جلوگیری از این اتفاق jQuery از تابع callback استفاده می کند.

تابع callback زمانی انجام می شود که که یک افکت به طورکامل اجرا شده باشد. در واقع با استفاده از تابع callback می توان افکت ها و بقیه دستورات را اولویت بندی کرد. در این مقاله می خواهیم چند مثال از کدهای جی کوئری با و بدون تابع callback را به شما عزیزان نشان دهیم. اگر قصد دارید تا تفاوت این دو را به خوبی درک نمایید با طراحی سایت اصفهان وب یار همراه باشید.

مثال از تابع Callback

در مثال زیر ابتدا افکت hide به طور کامل انجام می شود، سپس تابع alert اجرا می شود.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide("slow", function(){
            alert("The paragraph is now hidden");
        });
    });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

خروجی کد بالا:

توضیح کد:

$(document).ready(function(){})

برای نوشتن کد جی کوئری ابتدا باید از دستور بالا استفاده کنید و سپس بقیه ی کدها را در آن قرار دهید.

$(“button”).click(function(){})

این کد به این معنی است که وقتی برروی دکمه کلیک شد، قطعه کدی که داخل فانکشن است اجرا شود. توجه کنید که در تگ body از یک تگ button استفاده شده است. ولی اگر دو تگ button داشتید نمی توانستید از کلمه button به عنوان آیدی استفاده کنید و باید به هر یک از دکمه ها یک آیدی منحصر به فرد اختصاص بدهید و این گونه بنویسید :

$(“#btn1”)

$(“p”).hide(“slow”,function(){alert("The paragraph is now hidden");})

این کد به این معناست که تگ p با حرکت آهسته پنهان شود و بعد از آن یک پیغام برای شما به نمایش در بیاید.

مثال بدون تابع Callback:

در مثال زیر تابع alert قبل از اجرا شدن افکت hide اجرا می شود.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);
        alert("The paragraph is now hidden");
    });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

خروجی کد را می توانید در تصویر زیر مشاهده نمایید.

یک مثال دیگر با تابع callback

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Callback Executed Multiple Times</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
    h1{
        display:none;
        background:red;
        padding:20px;
    }
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>
</head>
<body>
    <h1>This is heading</h1>
    <p>This is paragraph.</p>
    <button type="button">Click me</button>
</body>
</html>

در این کد از افکت slidetoggle استفاده شده است. این افکت، دو افکت slideUp و slideDown را روی عناصر اعمال می کند. در این مثال، h1 به عنوان اسلاید اول و p به عنوان اسلاید دوم درنظر گرفته شده است. اگر بخواهید زمانی که اسلاید دوم می آید اسلاید اول پنهان شود باید به این صورت بنویسید (“h1, p”)$ ولی اگر می خواهید اسلاید دوم بالای اسلاید اول قرار گیرد باید به جای (“h1, p”)$ این کد را (“h1 “)$ قرار دهید.

خروجی کد

نکته: استفاده از متد slidetoggle به این صورت است :

$(selector).slideToggle(speed,easing,callback)

در مثال بعد افکت fadein همراه با تابع callback را در اختیار شما قرار می دهیم.

در این مثال بعد از این که افکت fadein به طور کامل انجام شد، تابع callback که در واقع همان تابع alert است اجرا می شود.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn("slow", function(){
            alert("The  square is fadein");
        });
    });
});
</script>
</head>
<body>
<button>fadeIn</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
</body>
</html>

خروجی به شرح زیر می باشد.

نتیجه

در این مقاله به آموزش تابع callback در jquery پرداختیم. اگر به مبحث جی کوئری علاقمند هستید می توانید مقالات آموزش مرجع چی کوئری را مشاهده کنید.