React：如何让useEffect异步执行且不阻塞spline更新？

你的代码之所以会阻碍spline及时更新，核心问题在于那个wait函数是同步阻塞的死循环——它会霸占主线程持续循环1秒，期间浏览器根本没时间处理UI渲染（包括曲线刷新），必须等这个循环跑完才能继续。而且Promise的执行器函数是同步执行的，所以这个死循环会直接卡住整个主线程。

把同步等待换成异步的setTimeout就能解决问题，修改后的代码如下：

useEffect(() => {
    async function asyncer() {
        const p = new Promise(function (resolve, reject) {
            // 用setTimeout实现异步等待，不会阻塞主线程
            setTimeout(() => {
                resolve();
            }, 1000);
        });

        p.then(() => console.log("hello"));
    }

    asyncer();
}, [spline]);

或者更简洁的写法：

useEffect(() => {
    const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
    
    async function asyncer() {
        await delay(1000);
        console.log("hello");
    }

    asyncer();
}, [spline]);

原理是：setTimeout会把回调函数放到浏览器的事件队列里，主线程处理完当前的UI更新（比如spline拖动后的曲线刷新）之后，再去执行这个异步回调，完全不会阻塞UI操作。

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