Promise を使用した JavaScript スライドショー関数での再帰の回避

呼び出しスタックのオーバーフローを回避するための再帰 JavaScript 関数の変更

JavaScript - 再帰を避けるための間隔ループを使用した Promise ベースのアプローチ

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 の使用

JavaScript - Promise のループを使用し、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. JavaScript 関数での再帰を回避するにはどうすればよいですか?
4. 1 つの解決策として使用されているのは、 setInterval または setTimeout 再帰なしでタスクをスケジュールします。もう 1 つのオプションはイベント駆動型モデルです。このモデルでは、関数が特定のユーザーまたはブラウザーのイベントによってトリガーされます。
5. なぜ使用しようとしたのですか while(true) ブラウザをロックしますか？
6. 使用する while(true) のような非同期操作なしで await または setTimeout 一時停止せずに連続ループで実行されるため、メインスレッドがブロックされ、ブラウザがフリーズします。
7. 使ってもいいですか Promises 再帰を避けるには？
8. はい、 Promises 再帰的な関数呼び出しを行わずに非同期実行を許可します。これにより、各操作が次の操作が開始される前に確実に完了し、スタックのオーバーフローが防止されます。
9. とは何ですか requestAnimationFrame それはどのように役立つのでしょうか？
10. requestAnimationFrame ブラウザのリフレッシュレートに同期した滑らかなアニメーションを作成できるメソッドです。これは効率的であり、ブラウザーのタブが非アクティブなときの不必要な計算を防ぎます。

連続ループの再帰の回避

JavaScript 関数での再帰の回避 (特に使用時) 約束、パフォーマンスを維持するために重要です。ループベースのアプローチまたはイベント駆動モデルに切り替えることで、開発者はコールスタックが際限なく増大することを防ぎ、ブラウザーのクラッシュを回避できます。

のようなメソッドを使用する セット間隔 または requestAnimationFrame、非同期操作を効果的に処理するだけでなく、スライドショーなどのタスクをスムーズに実行できるようになります。これらのソリューションはメモリ管理を改善し、再帰的な関数呼び出しに関連する問題を防止し、長時間実行されるプロセスの安定性を確保します。