如何在JSF上延迟Primefaces AjaxStatus？

How to add a delay (300ms for example) on when the Primefaces' AjaxStatus would show. Right now it shows always immediately when there's an Ajax request pending. This is troublesome for example on "onkeyUp" events when each key stroke brings the loading dialog up for a split second.

如何在Primefaces的AjaxStatus显示时添加延迟（例如300ms）。现在，当Ajax请求待处理时，它会立即显示。这对于“onkeyUp”事件来说很麻烦，例如当每个按键行程使加载对话框瞬间启动时。

Here's my AjaxStatus loading indicator component:

这是我的AjaxStatus加载指示器组件：

<p:ajaxStatus id="startAjax" onstart="PF('start').show();" oncomplete="PF('start').hide();" >
</p:ajaxStatus>

<p:dialog widgetVar="start" showHeader="false" resizable="false">
    <h:graphicImage value="#{resource['/images/loading.gif']}"></h:graphicImage>
</p:dialog>

1 个解决方案

#1

You need to wrap your PF('start').start() with a function which will call it with a delay. Also, the onComplete handler should check if you have pending status to show and cancel them. This is to avoid the case where ajax finished before status displayed.

你需要用一个函数来包装你的PF（'start'）。start（），它会延迟调用它。此外，onComplete处理程序应检查您是否有待显示和取消它们的待处理状态。这是为了避免ajax在显示状态之前完成的情况。

Code should be something like this (not tested)

代码应该是这样的（未经测试）

<p:ajaxStatus id = "startAjax" onstart = "startHandler();" oncomplete = "endHandler();"/>
    <script>
        var ajaxInProgress;
        function startHandler() {
            ajaxInProgress = setTimeout(function () {
                PF('start').show();
            }, 3000);
        }
        function endHandler() {
            clearTimeout(ajaxInProgress);
            PF('start').hide();
            ajaxInProgress = null;
        }
    </script>