التابع .delay() في jQuery
.delay( duration [, queueName ] )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
يضبط هذا التابع مؤقِّت لتأجيل تنفيذ العناصر التالية في طابور (queue) الانتظار.
.delay( duration [, queueName ] )
أُضيف مع الإصدار: 1.4.
duration
عدد صحيح يشير إلى مدة تأخير تنفيذ العنصر التالي في طابور (queue) الانتظار بالمللي ثانية.
queueName
سلسلة نصية تحتوي على اسم قائمة الانتظار التأثيرات القياسية. قيمتها الافتراضية fx.
يسمح لنا التابع .delay() بتأخير تنفيذ الدوال التي تتبعه في طابور (queue) الانتظار. ويمكن استخدامه مع طابور انتظار التأثيرات القياسية أو مع طوابير الانتظار المخصصة. ويؤجل الأحداث اللاحقة فقط في طابور انتظار؛ على سبيل المثال فإنه لن يؤخر أشكال الدوال .show() أو .hide() التي لا يوجد به وسائط والتي لا تستخدم طابور انتظار التأثيرات.
تُعطى المدد بالمللي ثانية، وتشير القيم الأعلى إلى حركة أبطأ، وليس أسرع. يمكن توفير السلاسل 'fast' و 'slow' للإشارة إلى الفترات 200 و 600 ميللي ثانية، على التوالي وبالترتيب.
باستخدام قائمة انتظار التأثيرات القياسية، يمكننا، على سبيل المثال، ضبط تأخير بمقدار 800 مللي ثانية بين .slideUp() و .fadeIn() للعنصر <div id="foo">:
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
عند تنفيذ هذه العبارة، ينزلق العنصر لأعلى لمدة 300 مللي ثانية ثم يتوقف مؤقتًا لمدة 800 مللي ثانية قبل أن يتلاشى في مدة 400 مللي ثانية.
يُعد التابع .delay() هو الأفضل للتأخير بين تأثيرات jQuery الموجودة في قائمة الانتظار. نظرًا لأنه محدود - على سبيل المثال ، لا يقدم طريقة لإلغاء التأخير - لا يعُد التابع .delay() بديلاً عن دالة setTimeout الأصيلة في JavaScript، والتي قد تكون أكثر ملائمة لحالات استخدام معينة.
أمثلة
تنشيط إخفاء وإظهار عنصري <div>، مع تأخير الأول قبل إظهاره:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delay مثال على التابع</title>
<style>
div {
position: absolute;
width: 60px;
height: 60px;
float: left;
}
.first {
background-color: #3f3;
left: 0;
}
.second {
background-color: #33f;
left: 80px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button>تشغيل</button></p>
<div class="first"></div>
<div class="second"></div>
<script>
$( "button" ).click(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
</script>
</body>
</html>