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

【问题标题】：Loading animation on lagging script using function使用函数在滞后脚本上加载动画
【发布时间】：2019-03-04 06:57:48
【问题描述】：

我有一个执行功能的按钮，该功能需要 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();
    }
}

但是动画不起作用，调用函数会直接导致页面卡顿，来不及显示动画。

【问题讨论】：

that function in question takes 5 seconds or so to finish and show the data on the page 这就是问题所在。听起来该脚本正在同步运行，因此 UI 在此期间无法更新。改为使那个长期运行的脚本异步。我建议使用低延迟setTimeout() 呼叫。如果你想要一个具体的例子，请在问题中添加一个简化版本的逻辑
@RoryMcCrossan 谢谢你，你回答了我的问题 :)

标签： javascript jquery

【解决方案1】：

以下是使用异步调用正确完成的方法：

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()

测试示例：https://jsfiddle.net/sg2nkrdy/1/

【讨论】：