Javascript 使用函数在滞后脚本上加载动画

我有一个按钮可以执行一个函数，这个函数需要5秒左右的时间来完成并在页面上显示数据，但问题是当它加载页面时，页面会延迟，光标会停留在指针上几秒钟。所以我想在这个“滞后”期间加载动画。我试过这个：

function showColors() {
    var buttons = $('td.details-control');

    for(var i = 0; i < buttons.length; i++)   {
        if(i == 0) {
            $('#spinner .loading').html('<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>');
        } else if (i == buttons.length-1) {
            if($('#spinner').length > 0){
                $('#spinner .loading').html('');
            }
        }
        buttons[i].click();
    }
}

函数showColors（）{
变量按钮=$（'td.details control'）；
对于（变量i=0；i0）{
$（'#spinner.load'）.html（''）；
}
}
按钮[i]。单击（）；
}
}

---

但是动画不起作用，因为调用函数会使页面直接滞后，它没有时间显示动画。

因此，下面是如何正确使用异步调用的：

function resolveAfter5Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            var buttons = $('td.details-control');

            for(var i = 0; i < buttons.length; i++)   {
                resolve(buttons[i].click());
            }
        }, 5000);
    });
}

async function showColors() {
    $('#spinner .loading').html('<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>');

    await resolveAfter5Seconds();

    if($('#spinner').length > 0){
        $('#spinner .loading').html('');
    }

}

showColors()

函数resolveAfter5Seconds（）{
返回新承诺（解决=>{
设置超时（（）=>{
变量按钮=$（'td.details control'）；
对于（变量i=0；i0）{
$（'#spinner.load'）.html（''）；
}
}
showColors（）

---

测试示例：

有问题的函数需要5秒钟左右才能完成并在页面上显示数据

这就是问题所在。听起来该脚本是同步运行的，因此UI在此期间无法更新。改为使长时间运行的scrip异步。我建议使用低延迟

setTimeout（）

调用。如果您想要一个特定的示例，请在question@RoryMcCrossan谢谢，你回答了我的问题：）