वादों के साथ जावास्क्रिप्ट स्लाइड शो फ़ंक्शन में पुनरावृत्ति से बचना

कॉल स्टैक ओवरफ़्लो से बचने के लिए पुनरावर्ती जावास्क्रिप्ट फ़ंक्शन को संशोधित करना

जावास्क्रिप्ट - पुनरावृत्ति से बचने के लिए अंतराल लूप के साथ वादा-आधारित दृष्टिकोण

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');
  setInterval(async () => {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }
  }, duration);
}

रिकर्सन के बिना एसिंक्रोनस जावास्क्रिप्ट का उपयोग करना

जावास्क्रिप्ट - वादों के साथ एक लूप का उपयोग करके समाधान और सेटइंटरवल से बचना

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');

  while (true) {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }

    await sleep(duration);
  }
}

जावास्क्रिप्ट स्लाइड शो में रिकर्सन से बचने पर सामान्य प्रश्न

1. जावास्क्रिप्ट में रिकर्सन क्या है और स्लाइड शो में यह समस्या क्यों है?
2. रिकर्सन तब होता है जब कोई फ़ंक्शन स्वयं कॉल करता है, और यदि लगातार किया जाता है, तो यह स्टैक ओवरफ़्लो का कारण बन सकता है। स्लाइड शो में, इससे अत्यधिक मेमोरी उपयोग होगा और संभावित रूप से ब्राउज़र क्रैश हो जाएगा।
3. मैं जावास्क्रिप्ट फ़ंक्शन में रिकर्सन से कैसे बच सकता हूं?
4. एक समाधान का उपयोग कर रहा है setInterval या setTimeout पुनरावृत्ति के बिना कार्यों को शेड्यूल करना। एक अन्य विकल्प इवेंट-संचालित मॉडल है, जहां फ़ंक्शन विशिष्ट उपयोगकर्ता या ब्राउज़र इवेंट द्वारा ट्रिगर होते हैं।
5. मैंने उपयोग करने का प्रयास क्यों किया? while(true) ब्राउज़र लॉक करें?
6. का उपयोग करते हुए while(true) जैसे अतुल्यकालिक ऑपरेशन के बिना await या setTimeout बिना रुके निरंतर लूप में चलता है, जो मुख्य थ्रेड को अवरुद्ध कर देता है, जिससे ब्राउज़र फ़्रीज़ हो जाता है।
7. क्या मैं उपयोग कर सकता हूँ Promises पुनरावृत्ति से बचने के लिए?
8. हाँ, Promises पुनरावर्ती फ़ंक्शन कॉल के बिना अतुल्यकालिक निष्पादन की अनुमति दें। यह सुनिश्चित करता है कि प्रत्येक ऑपरेशन अगले ऑपरेशन के शुरू होने से पहले पूरा हो जाए, जिससे स्टैक ओवरफ्लो को रोका जा सके।
9. क्या है requestAnimationFrame और यह कैसे मदद करता है?
10. requestAnimationFrame एक ऐसी विधि है जो आपको ब्राउज़र की ताज़ा दर के साथ सिंक्रनाइज़ किए गए सहज एनिमेशन बनाने की अनुमति देती है। यह कुशल है और ब्राउज़र टैब निष्क्रिय होने पर अनावश्यक गणनाओं को रोकता है।

सतत लूप के लिए रिकर्सन से बचना

जावास्क्रिप्ट फ़ंक्शंस में रिकर्सन से बचना, विशेष रूप से उपयोग करते समय वादे, प्रदर्शन को बनाए रखने के लिए महत्वपूर्ण है। लूप-आधारित दृष्टिकोण या इवेंट-संचालित मॉडल पर स्विच करके, डेवलपर्स कॉल स्टैक को अंतहीन रूप से बढ़ने से रोक सकते हैं और ब्राउज़र क्रैश से बच सकते हैं।

जैसे तरीकों का उपयोग करना सेटअंतराल या requestAnimationFrame, साथ ही एसिंक्रोनस संचालन को प्रभावी ढंग से संभालने से स्लाइड शो जैसे कार्यों का सुचारू निष्पादन संभव हो सकेगा। ये समाधान बेहतर मेमोरी प्रबंधन प्रदान करते हैं और पुनरावर्ती फ़ंक्शन कॉल से जुड़े मुद्दों को रोकते हैं, लंबे समय तक चलने वाली प्रक्रियाओं में स्थिरता सुनिश्चित करते हैं।