Tránh đệ quy trong chức năng trình chiếu JavaScript với lời hứa

Sửa đổi hàm JavaScript đệ quy để tránh tràn cuộc gọi

JavaScript - Cách tiếp cận dựa trên lời hứa với vòng lặp khoảng thời gian để tránh đệ quy

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

Sử dụng JavaScript không đồng bộ mà không đệ quy

JavaScript - Giải pháp sử dụng vòng lặp với Promises và tránh 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);
  }
}

Các câu hỏi thường gặp về việc tránh đệ quy trong trình chiếu JavaScript

1. Đệ quy trong JavaScript là gì và tại sao nó lại là vấn đề trong trình chiếu?
2. Đệ quy xảy ra khi một hàm gọi chính nó và nếu được thực hiện liên tục, nó có thể dẫn đến tràn ngăn xếp. Trong trình chiếu, điều này có thể gây ra việc sử dụng quá nhiều bộ nhớ và có thể làm hỏng trình duyệt.
3. Làm cách nào để tránh đệ quy trong hàm JavaScript?
4. Một giải pháp đang sử dụng setInterval hoặc setTimeout để lên lịch các nhiệm vụ mà không cần đệ quy. Một tùy chọn khác là mô hình hướng sự kiện, trong đó các chức năng được kích hoạt bởi các sự kiện trình duyệt hoặc người dùng cụ thể.
5. Tại sao tôi cố gắng sử dụng while(true) khóa trình duyệt?
6. sử dụng while(true) không có hoạt động không đồng bộ như await hoặc setTimeout chạy liên tục mà không tạm dừng, chặn luồng chính, khiến trình duyệt bị treo.
7. Tôi có thể sử dụng không? Promises để tránh tái diễn?
8. Đúng, Promises cho phép thực thi không đồng bộ mà không cần gọi hàm đệ quy. Điều này đảm bảo mỗi thao tác hoàn thành trước khi thao tác tiếp theo bắt đầu, ngăn ngừa tràn ngăn xếp.
9. Là gì requestAnimationFrame và nó giúp ích như thế nào?
10. requestAnimationFrame là phương pháp cho phép bạn tạo các hình ảnh động mượt mà đồng bộ với tốc độ làm mới của trình duyệt. Nó hiệu quả và ngăn chặn những tính toán không cần thiết khi tab trình duyệt không hoạt động.

Tránh đệ quy cho các vòng lặp liên tục

Tránh đệ quy trong các hàm JavaScript, đặc biệt khi sử dụng Lời hứa, rất quan trọng để duy trì hiệu suất. Bằng cách chuyển sang phương pháp tiếp cận dựa trên vòng lặp hoặc mô hình hướng sự kiện, nhà phát triển có thể ngăn ngăn xếp cuộc gọi phát triển vô tận và tránh sự cố trình duyệt.

Sử dụng các phương pháp như tập khoảng thời gian hoặc requestAnimationFrame, cũng như việc xử lý các hoạt động không đồng bộ một cách hiệu quả, sẽ cho phép thực hiện suôn sẻ các tác vụ như trình chiếu. Các giải pháp này cung cấp khả năng quản lý bộ nhớ tốt hơn và ngăn chặn các sự cố liên quan đến lệnh gọi hàm đệ quy, đảm bảo tính ổn định trong các quy trình chạy dài.