Question

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

但是动画无法正常工作，因为调用该函数会使页面直接滞后，并且没有时间显示动画。

Answer 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/

使用功能在滞后脚本上加载动画

1 个答案: