031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » jquery » تابع callback در jquery

تابع callback در jquery

۱۲ام اسفند ۱۳۹۶
مرضیه خیرخواه
76

تابع 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
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
مرضیه خیرخواه

مطالب مرتبط

آموزش هشدارها در بوت استرپ

هشدارها در بوت استرپ – آموزش bootstrap

هشدارها در بوت استرپ در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد. هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر […]

ارسال دیدگاه

*    

*