显示延迟加载动画

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 页面：

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

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

var timer;

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

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