जावास्क्रिप्ट में समय विलंब को लागू करना

वेब विकास के क्षेत्र में, उपयोगकर्ता के अनुकूल बनाने के लिए विभिन्न घटनाओं के समय को नियंत्रित करना महत्वपूर्ण है और इंटरैक्टिव अनुभव. एक सामान्य आवश्यकता उपयोगकर्ता इनपुट द्वारा ट्रिगर की गई तीव्र या दोहराव वाली कार्रवाइयों को रोकने के लिए समय विलंब शुरू करना है।

विशेष रूप से, जावास्क्रिप्ट समय विलंब प्राप्त करने के लिए एक बहुमुखी विधि प्रदान करता है। छवियों के साथ काम करते समय, जैसा कि दिए गए कोड में है, आप एक निर्दिष्ट अवधि के लिए जावास्क्रिप्ट कोड के निष्पादन को रोकने के लिए setTimeout() फ़ंक्शन का उपयोग कर सकते हैं।

अपने कोड में, आपका लक्ष्य एक टॉगल व्यवहार बनाना है जहां किसी छवि पर क्लिक करने से उसका स्रोत "img_onclick.jpg" में बदल जाता है और वापस लौटने से पहले 1000 मिलीसेकंड (1 सेकंड) की देरी हो जाती है "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_onclick.jpg" छवि पर क्लिक करने पर "img.jpg" छवि तुरंत प्रदर्शित नहीं होती है।

setTimeout() का उपयोग किए बिना वैकल्पिक दृष्टिकोण के लिए, इस प्रश्न को देखें .