javascript - 显示延迟加载动画

Question

在我的 Web 应用程序中，我使用 JSF 和 primefaces。在某些按钮上，我有一些耗时的功能。在此期间，我想显示加载动画，直到完整的站点完全构建完成。我通过调用函数 showLoading() 和 hideLoading() 来完成此操作，如下所示:

<p:commandLink oncomplete="hideLoading();" onstart="showLoading()" process="@form" update="@form" actionListener="#{dummyController.dummyMethod}"
Content
</p:commandLink>

在函数内部，我只是显示/隐藏具有指定 ID 的 div 对象:

function showLoading() {
    $("#loader").show();
}

这一切都运行良好。现在我只想在页面需要超过一秒的时间来构建时才显示加载动画。这就是为什么我这样修改我的函数:

function showLoading() {
    $(#loader").delay(1000).show(0);
}

function hideLoading() {
    $("#loader").clearQueue();
    $("#loader").hide();
}

此时我的问题是:有时加载程序工作正常，但在某些情况下它不会出现。我的建议:showLoading 在不同时间调用(由客户端管理)。有时它会在开始时被调用，但有时其他操作会在 showLading 之前执行，因此构建页面的其余部分只需不到一秒的时间。

有人有任何建议来解决这个问题吗？也许可以使用 Javascript 中的多线程(我读过一些有关 Web Workers 的内容...)

感谢您的帮助。

Answer 1

来自 jQuery delay页面:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

我认为你可以使用setTimeout javascript函数，像这样

var timer;

function showLoading() {
    timer = setTimeout(function(){
                          $(#loader").show(0);
                       }, 1000);
}

function hideLoading() {
    if(timer){
        clearTimeout(timer);
    }
    $("#loader").hide();
}