等待requestAnimationFrame

Question

JS可以在线等待requestAnimationFrame()吗？

因为在用户看到消息(被绘制到屏幕)之前，“编译顶点着色器.”JS被困在编译着色器(几秒钟)。

我更喜欢内联，而不是为每个重函数创建多个函数，也不愿继续下一行而不调用next函数。

另外，让它成为生成器是不可能的，因为它需要控制函数来执行它，编译器的常见错误将很难捕捉。(生产版本上的错误不是dev)

document.getElementById("errorLog").innerHTML += "Compiling vertex shader ... ";
await requestAnimationFrame(); // <= HERE
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.error(`ERROR compiling vertex shader! \n ${gl.getShaderInfoLog(vertexShader)}`);
}
document.getElementById("errorLog").innerHTML += "DONE<br/>";

document.getElementById("errorLog").innerHTML += "Compiling fragment shader ... ";
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.error(`ERROR compiling fragment shader! \n ${gl.getShaderInfoLog(fragmentShader)}`);
}
document.getElementById("errorLog").innerHTML += "DONE<br/>";

Answer 1

假设您只是想等待，并且没有将返回值用于任何事情，那么您可以简单地使用它周围的一个承诺来使它能够实现await：

await new Promise(resolve => requestAnimationFrame(resolve));

甚至是

await new Promise(requestAnimationFrame)

您也可以为此创建一个函数，例如

function promiseNextFrame(){
    return new Promise( resolve => requestAnimationFrame(resolve) ); 
}

然后使用await promiseNextFrame()