代码之家 › 专栏 › 技术社区 › Alexandre Elshobokshy

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

jquery javascript

Alexandre Elshobokshy · 技术社区 · 6 年前

我有一个按钮执行一个函数,这个函数需要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();
    }
}

但是动画不起作用,因为调用函数会使页面直接延迟,并且没有时间显示动画。

1 回复 | 直到 6 年前

Alexandre Elshobokshy 6 年前

下面是如何正确地使用异步调用:

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/