التابع .delay() في jQuery
.delay( duration [, queueName ] )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
يضبط هذا التابع مؤقِّت لتأجيل تنفيذ العناصر التالية في قائمة الانتظار.
.delay( duration [, queueName ] )
أُضيف مع الإصدار: 1.4.
duration
عدد صحيح يشير إلى مدة تأخير تنفيذ العنصر التالي في قائمة الانتظار بالمللي ثانية.
queueName
سلسلة نصية تحتوي على اسم قائمة الانتظار التأثيرات القياسية. قيمتها الافتراضية fx.
يسمح لنا التابع .delay() بتأخير تنفيذ الدوال التي تتبعه في قائمة الانتظار. ويمكن استخدامه مع قائمة انتظار التأثيرات القياسية أو مع قائمة الانتظار المخصصة. ويؤجل الأحداث اللاحقة فقط في قائمة انتظار؛ على سبيل المثال فإنه لن يؤخر أشكال الدوال .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 demo</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>Run</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>