Question

在我的Web应用程序中，我正在使用JSF和primefaces。在某些按钮上，我有耗时的功能。在此期间，我想显示一个加载动画，直到完整的网站完全构建。我这样做是通过调用函数showLoading（）和hideLoading（）来完成的：

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

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

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

显示加载动画延迟

1 个答案: