تنفيذ تأخير الوقت في جافا سكريبت

في مجال تطوير الويب، يعد التحكم في توقيت الأحداث المختلفة أمرًا بالغ الأهمية لإنشاء سهل الاستخدام و تجارب تفاعلية. أحد المتطلبات الشائعة هو تقديم تأخير زمني لمنع الإجراءات السريعة أو المتكررة الناتجة عن مدخلات المستخدم.

على وجه التحديد، توفر JavaScript طريقة متعددة الاستخدامات لتحقيق تأخيرات زمنية. عند العمل مع الصور، كما هو الحال في التعليمات البرمجية المقدمة، يمكنك استخدام وظيفة

setTimeout() لإيقاف تنفيذ تعليمات JavaScript البرمجية مؤقتًا لمدة محددة.

في التعليمات البرمجية الخاصة بك، أنت تهدف إلى إنشاء سلوك تبديل حيث يؤدي النقر فوق الصورة إلى تغيير مصدرها إلى "img_onclick.jpg" ويؤدي إلى تأخير قدره 1000 مللي ثانية (ثانية واحدة) قبل العودة مرة أخرى إلى "img.jpg". ولتحقيق ذلك، نقدم الدالة

setTimeout() كما يلي:

var delayInMilliseconds = 1000; // Set the desired delay

$(".trigger").click(function() {
  // Code to handle image toggle
  $(this).next(".toggle-container").slideToggle();
  setTimeout(function() {
    $(this).find('img').prop('src', 'http://localhost:8888/images/img.jpg');
  }, delayInMilliseconds);
});

من خلال تغليف الكود الذي يعيد مصدر الصورة داخل وظيفة

setTimeout()، نقوم بإنشاء تأخير بعد إجراء عملية التبديل. وهذا يضمن عدم عرض الصورة "img.jpg" فور النقر على الصورة "img_onclick.jpg".

للحصول على طريقة بديلة دون استخدام

setTimeout()، ارجع إلى هذا السؤال .