வாக்குறுதிகளுடன் ஜாவாஸ்கிரிப்ட் ஸ்லைடுஷோ செயல்பாட்டில் மறுநிகழ்வைத் தவிர்க்கிறது

கால் ஸ்டாக் ஓவர்ஃப்ளோவைத் தவிர்க்க சுழல்நிலை ஜாவாஸ்கிரிப்ட் செயல்பாட்டை மாற்றுகிறது

ஜாவாஸ்கிரிப்ட் - மறுநிகழ்வைத் தவிர்ப்பதற்கான இடைவெளி வளையத்துடன் கூடிய வாக்குறுதி அடிப்படையிலான அணுகுமுறை

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 உலாவியின் புதுப்பிப்பு விகிதத்துடன் ஒத்திசைக்கப்பட்ட மென்மையான அனிமேஷன்களை உருவாக்க உங்களை அனுமதிக்கும் ஒரு முறையாகும். இது திறமையானது மற்றும் உலாவி தாவல் செயலற்ற நிலையில் இருக்கும்போது தேவையற்ற கணக்கீடுகளைத் தடுக்கிறது.

தொடர்ச்சியான சுழல்களுக்கான மறுநிகழ்வைத் தவிர்ப்பது

ஜாவாஸ்கிரிப்ட் செயல்பாடுகளில், குறிப்பாக பயன்படுத்தும் போது, ​​மறுநிகழ்வைத் தவிர்ப்பது வாக்குறுதி அளிக்கிறார், செயல்திறனைப் பராமரிக்க மிகவும் முக்கியமானது. லூப் அடிப்படையிலான அணுகுமுறை அல்லது நிகழ்வு-உந்துதல் மாதிரிக்கு மாறுவதன் மூலம், டெவலப்பர்கள் அழைப்பு அடுக்கை முடிவில்லாமல் வளர்வதைத் தடுக்கலாம் மற்றும் உலாவி செயலிழப்புகளைத் தவிர்க்கலாம்.

போன்ற முறைகளைப் பயன்படுத்துதல் இடைவெளியை அமைக்கவும் அல்லது கோரிக்கை அனிமேஷன் ஃப்ரேம், அதே போல் ஒத்திசைவற்ற செயல்பாடுகளை திறம்பட கையாள்வது, ஸ்லைடு காட்சிகள் போன்ற பணிகளை சீராக செயல்படுத்த அனுமதிக்கும். இந்த தீர்வுகள் சிறந்த நினைவக நிர்வாகத்தை வழங்குகின்றன மற்றும் சுழல்நிலை செயல்பாட்டு அழைப்புகளுடன் தொடர்புடைய சிக்கல்களைத் தடுக்கின்றன, நீண்ட கால செயல்முறைகளில் நிலைத்தன்மையை உறுதி செய்கின்றன.