JavaScript能否内联使用await requestAnimationFrame()？

完全可以用await requestAnimationFrame()的内联写法解决你的问题，核心是通过异步等待让浏览器先完成提示内容的渲染，再执行耗时的着色器编译操作。

具体实现步骤 #

1. 先把原生的requestAnimationFrame包装成返回Promise的函数，这样才能用await调用：

const waitForNextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));

2. 在内联代码中按顺序执行：绘制提示 → 等待下一帧渲染 → 执行编译：

async function processShader() {
  // 1. 同步绘制提示到屏幕（比如更新DOM文本或Canvas内容）
  document.getElementById('compile-hint').textContent = 'Compiling vertex shader ...';

  // 2. 等待浏览器完成当前帧渲染，确保提示显示出来
  await waitForNextFrame();

  // 3. 执行耗时的着色器编译操作
  const shader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(shader, vertexShaderSource);
  gl.compileShader(shader);

  // 4. 编译完成后清除提示
  document.getElementById('compile-hint').textContent = '';
}

为什么这个方案有效 #

await waitForNextFrame()会暂停当前async函数的执行，把控制权交还给浏览器。浏览器会利用这个间隙完成当前帧的所有渲染任务（包括你刚绘制的提示文本），之后才会回到async函数中执行后续的编译逻辑，这样就不会因为编译阻塞导致提示无法显示。

注意事项 #

• 绘制提示的操作必须是同步完成的（比如直接修改DOM或Canvas状态），确保在await前已经向浏览器提交了渲染指令。
• 如果着色器编译耗时极长（比如几秒级），可以考虑后续补充进度更新逻辑，但基础的提示显示用这个方案完全足够。

内容的提问来源于stack exchange，提问作者Nogare