使用 Promises 避免 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 - 使用带有 Promises 的循环并避免 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. 一种解决方案是使用 setInterval 或者 setTimeout 无需递归即可安排任务。另一种选择是事件驱动模型，其中功能由特定用户或浏览器事件触发。
5. 为什么我尝试使用 while(true) 锁定浏览器？
6. 使用 while(true) 没有像这样的异步操作 await 或者 setTimeout 连续循环运行而不暂停，这会阻塞主线程，导致浏览器冻结。
7. 我可以使用吗 Promises 以避免递归？
8. 是的， Promises 允许异步执行而无需递归函数调用。这可确保每个操作在下一个操作开始之前完成，从而防止堆栈溢出。
9. 什么是 requestAnimationFrame 它有什么帮助？
10. requestAnimationFrame 是一种允许您创建与浏览器刷新率同步的平滑动画的方法。它非常高效，并且可以在浏览器选项卡处于非活动状态时防止不必要的计算。

避免连续循环的递归

避免 JavaScript 函数中的递归，特别是在使用时 承诺，对于维持性能至关重要。通过切换到基于循环的方法或事件驱动模型，开发人员可以防止调用堆栈无休止地增长并避免浏览器崩溃。

使用类似的方法 设置时间间隔 或者 请求动画帧以及有效处理异步操作，将允许顺利执行幻灯片等任务。这些解决方案提供更好的内存管理并防止与递归函数调用相关的问题，确保长时间运行的进程的稳定性。