ਵਾਅਦਿਆਂ ਦੇ ਨਾਲ JavaScript ਸਲਾਈਡਸ਼ੋ ਫੰਕਸ਼ਨ ਵਿੱਚ ਦੁਹਰਾਓ ਤੋਂ ਬਚਣਾ

ਕਾਲ ਸਟੈਕ ਓਵਰਫਲੋ ਤੋਂ ਬਚਣ ਲਈ ਆਵਰਤੀ JavaScript ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧਣਾ

JavaScript - ਦੁਹਰਾਓ ਤੋਂ ਬਚਣ ਲਈ ਇੱਕ ਅੰਤਰਾਲ ਲੂਪ ਦੇ ਨਾਲ ਵਾਅਦਾ-ਆਧਾਰਿਤ ਪਹੁੰਚ

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);
}

ਰੀਕਰਸ਼ਨ ਤੋਂ ਬਿਨਾਂ ਅਸਿੰਕ੍ਰੋਨਸ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

JavaScript - ਵਾਅਦਿਆਂ ਦੇ ਨਾਲ ਇੱਕ ਲੂਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ setInterval ਤੋਂ ਬਚਣ ਦਾ ਹੱਲ

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);
  }
}

JavaScript ਸਲਾਈਡਸ਼ੋ ਵਿੱਚ ਦੁਹਰਾਓ ਤੋਂ ਬਚਣ ਬਾਰੇ ਆਮ ਸਵਾਲ

1. JavaScript ਵਿੱਚ ਆਵਰਤੀ ਕੀ ਹੈ ਅਤੇ ਇਹ ਸਲਾਈਡਸ਼ੋਜ਼ ਵਿੱਚ ਇੱਕ ਸਮੱਸਿਆ ਕਿਉਂ ਹੈ?
2. ਦੁਹਰਾਓ ਉਦੋਂ ਵਾਪਰਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਆਪਣੇ ਆਪ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ, ਅਤੇ ਜੇਕਰ ਲਗਾਤਾਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਸਟੈਕ ਓਵਰਫਲੋ ਵੱਲ ਅਗਵਾਈ ਕਰ ਸਕਦਾ ਹੈ। ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਵਿੱਚ, ਇਹ ਬਹੁਤ ਜ਼ਿਆਦਾ ਮੈਮੋਰੀ ਵਰਤੋਂ ਦਾ ਕਾਰਨ ਬਣੇਗਾ ਅਤੇ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਕਰੈਸ਼ ਕਰੇਗਾ।
3. ਮੈਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨ ਵਿੱਚ ਦੁਹਰਾਉਣ ਤੋਂ ਕਿਵੇਂ ਬਚ ਸਕਦਾ ਹਾਂ?
4. ਇੱਕ ਹੱਲ ਵਰਤ ਰਿਹਾ ਹੈ setInterval ਜਾਂ setTimeout ਬਿਨਾਂ ਦੁਹਰਾਏ ਕੰਮਾਂ ਨੂੰ ਤਹਿ ਕਰਨ ਲਈ। ਇੱਕ ਹੋਰ ਵਿਕਲਪ ਇਵੈਂਟ-ਸੰਚਾਲਿਤ ਮਾਡਲ ਹੈ, ਜਿੱਥੇ ਵਿਸ਼ੇਸ਼ ਉਪਭੋਗਤਾ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਇਵੈਂਟਸ ਦੁਆਰਾ ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
5. ਮੇਰੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਿਉਂ ਕੀਤੀ while(true) ਬਰਾਊਜ਼ਰ ਨੂੰ ਲਾਕ ਕਰੋ?
6. ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ while(true) ਬਿਨਾਂ ਕਿਸੇ ਅਸਿੰਕਰੋਨਸ ਓਪਰੇਸ਼ਨ ਜਿਵੇਂ await ਜਾਂ setTimeout ਬਿਨਾਂ ਰੁਕੇ ਲਗਾਤਾਰ ਲੂਪ ਵਿੱਚ ਚੱਲਦਾ ਹੈ, ਜੋ ਮੁੱਖ ਥ੍ਰੈਡ ਨੂੰ ਬਲੌਕ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਫ੍ਰੀਜ਼ ਹੋ ਜਾਂਦਾ ਹੈ।
7. ਕੀ ਮੈਂ ਵਰਤ ਸਕਦਾ ਹਾਂ Promises ਦੁਹਰਾਉਣ ਤੋਂ ਬਚਣ ਲਈ?
8. ਹਾਂ, Promises ਰੀਕਰਸੀਵ ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਤੋਂ ਬਿਨਾਂ ਅਸਿੰਕਰੋਨਸ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਦੀ ਆਗਿਆ ਦਿਓ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਹਰੇਕ ਓਪਰੇਸ਼ਨ ਅਗਲੇ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪੂਰਾ ਹੋ ਜਾਂਦਾ ਹੈ, ਸਟੈਕ ਓਵਰਫਲੋ ਨੂੰ ਰੋਕਦਾ ਹੈ।
9. ਕੀ ਹੈ requestAnimationFrame ਅਤੇ ਇਹ ਕਿਵੇਂ ਮਦਦ ਕਰਦਾ ਹੈ?
10. requestAnimationFrame ਇੱਕ ਢੰਗ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਰਿਫਰੈਸ਼ ਦਰ ਨਾਲ ਸਮਕਾਲੀ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਕੁਸ਼ਲ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਅਕਿਰਿਆਸ਼ੀਲ ਹੋਣ 'ਤੇ ਬੇਲੋੜੀਆਂ ਗਣਨਾਵਾਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।

ਲਗਾਤਾਰ ਲੂਪਸ ਲਈ ਦੁਹਰਾਓ ਤੋਂ ਬਚਣਾ

JavaScript ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ ਦੁਹਰਾਓ ਤੋਂ ਬਚਣਾ, ਖਾਸ ਤੌਰ 'ਤੇ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਵਾਅਦੇ, ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਲੂਪ-ਅਧਾਰਿਤ ਪਹੁੰਚ ਜਾਂ ਇਵੈਂਟ-ਸੰਚਾਲਿਤ ਮਾਡਲ 'ਤੇ ਸਵਿਚ ਕਰਕੇ, ਡਿਵੈਲਪਰ ਕਾਲ ਸਟੈਕ ਨੂੰ ਬੇਅੰਤ ਵਧਣ ਤੋਂ ਰੋਕ ਸਕਦੇ ਹਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕਰੈਸ਼ ਤੋਂ ਬਚ ਸਕਦੇ ਹਨ।

ਵਰਗੇ ਤਰੀਕਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ setInterval ਜਾਂ ਐਨੀਮੇਸ਼ਨ ਫਰੇਮ ਦੀ ਬੇਨਤੀ ਕਰੋ, ਨਾਲ ਹੀ ਅਸਿੰਕ੍ਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲਣਾ, ਸਲਾਈਡਸ਼ੋਜ਼ ਵਰਗੇ ਕਾਰਜਾਂ ਨੂੰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਚਲਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦੇਵੇਗਾ। ਇਹ ਹੱਲ ਬਿਹਤਰ ਮੈਮੋਰੀ ਪ੍ਰਬੰਧਨ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹਨ ਅਤੇ ਰਿਕਰਸਿਵ ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਨਾਲ ਜੁੜੇ ਮੁੱਦਿਆਂ ਨੂੰ ਰੋਕਦੇ ਹਨ, ਲੰਬੇ ਸਮੇਂ ਤੋਂ ਚੱਲ ਰਹੀਆਂ ਪ੍ਰਕਿਰਿਆਵਾਂ ਵਿੱਚ ਸਥਿਰਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ।