تابع callback در jquery


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

آموزش تابع callback در جی کوئری

تابع callback

همان طور که می دانید jquery یک کتابخانه جاوا اسکریپت است. کدهای جاوا اسکریپت خط به خط اجرا می شوند، اما از آن جایی که کدهای جی کوئری طول می کشد تا اعمال شوند ممکن است خط بعدی اجرا شود در حالی که کد قبلی هنوز در حال اجراست. برای جلوگیری از این اتفاق jQuery از تابع callback استفاده می کند. تابع 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>

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

تابع callback در jquery

توضیح کد:

$(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>

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

افکت hide بدون تابع callback

یک مثال دیگر با تابع 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 به همراه تابع callback

 

نکته:  استفاده از متد 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>

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

متد fadeIn

نتیجه

در این مقاله به آموزش تابع callback در jquery پرداختیم. اگر به مبحث جی کوئری علاقمند هستید می توانید مقالات آموزش انتخاب گرهای جی کوئری، متد text در jquery ، متد before در جی کوئری، متد clone در جی کوئری، متد data و متد noconflict را مطالعه کنید.

نوشته تابع callback در jquery اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*
*

..................................................................................طراحی وب سایت , سئو وب سایت , طراحی قالب وردپرس , فروش بک لینک , فروش رپورتاژ.................................................................................. رد کردن

آفلاین

در حال حاضر نیستیم. لطفا پیام خود را ارسال کنید, در اولین فرصت رسیدگی میکنیم. با تشکر : تیم پشتیبانی اسپادان

هر سولی دارید بپرسید.

شروع چت