Charonyu's Profile

我今天要用three.js截圖時


useEffect(() => {
    const link = document.createElement("a");
    link.setAttribute("download", "canvas.webp"); // 设置文件名为canvas.webp
    link.setAttribute("href", gl.domElement.toDataURL("image/webp")); // 设置链接为WebP格式
    link.click();
  }, []);

發現他在three還沒加載完就拍照了，但我需要他跑完three的模型才截圖，發現應該使用setTimeout輔助


useEffect(() => {
    // 使用 setTimeout 延迟执行截图操作，确保在组件加载后执行
    setTimeout(() => {
      const imageDataURL = gl.domElement.toDataURL("image/webp"); // 获取图像数据URL
      // 将图像数据发送到后端或进行其他处理
      console.log("图像数据URL:", imageDataURL);
    }, 0);
  }, []);

當使用 setTimeout 時，指定的回調函數不會立即執行，而是被放置在事件佇列（Event Queue）中，並在特定的時間間隔後才會執行。事件佇列中的任務按照它們進入佇列的順序依次執行。

在 React 中，組件的載入和渲染也是異步的過程。當組件被建立並插入到 DOM 中時，React 會執行一系列操作，包括構建虛擬 DOM、渲染組件、處理生命周期方法等。這些操作在 JavaScript 的事件循環中也是作為異步任務執行的。

因此，當您在 useEffect 中使用 setTimeout 來執行某個操作時，它將被添加到事件佇列中，並且會等待當前事件循環中的任務（包括組件載入和渲染）完成後才會執行。這就是為什麼 setTimeout 在組件載入後執行的原因。

setTimeout →Event Loop發生的事