primefaces keyup 或其他 ajax 事件延迟

Posted 2023-02-23

【中文标题】primefaces keyup 或其他 ajax 事件延迟

【英文标题】：primefaces keyup or other ajax event delay

【发布时间】：2012-01-14 03:10:20

【问题描述】：

我有类似的东西：

<p:inputText...>
    <p:ajax event="keyup" update="somefield" listener="#someBean.doSomething"/>
</p:inputText>

但我不想在每次按键时都发出 Ajax 请求，我想在用户停止写入后半秒发出请求。

我在另一个问题中看到这个问题在 jQuery 中得到了解决： How to delay the .keyup() handler until the user stops typing?

我想知道是否可以在 primefaces 上执行此操作，或者如何根据 jQuery 问题调整解决方案。 我正在使用 PrimeFaces 3.0.M4。 提前谢谢你。

【参考方案1】：

如果使用 Primefaces 5.x，delay 标记中有一个用于此目的的 delay 属性。所以它是这样完成的：

<p:inputText...>
    <p:ajax event="keyup" delay="1000" listener="#someBean.doSomething"
        update="somefield" process="@this" />
</p:inputText>

如果没有，您可以使用f:ajax 而不是p:ajax 来实现它（是的，它也适用于p:inputText）。从 JSF 2.2 开始，f:ajax 增加了对 queue control 的支持。所以代码看起来像：

<p:inputText...>
    <f:ajax event="keyup" delay="1000" listener="#someBean.doSomething"
        render="somefield" execute="@this" />
</p:inputText>

另请参阅：

Primefaces 5.0 p:ajax javadoc JSF 2.2 docs for f:ajax

【讨论】：

f:ajax 是否支持每个 PrimeFaces 组件具有的所有事件，还是有限制？

@Kukeltje，对此不确定。理论上，p:ajax 是一个更强大的实现，但组件也应该与f:ajax 一起使用。无论如何，这个答案是在 IMO 这个具体案例中不使用 f:ajax 的唯一缺点。

试图将“延迟”添加到p:ajax 到？根据文档，它存在。

@Kukeltje，你是对的。它是为 5.x 添加的。我要更新我的答案;-)

现在我想要一半的声誉;-)

【参考方案2】：

为什么不使用 PrimeFaces 的 RemoteCommand 组件？

它为您提供了一个全局 javascript 函数，您可以随时随地调用该函数。它允许您调用托管 bean 方法，它具有用于部分更新的 update 属性。

<p:inputText id="input" />

<h:form>
    <p:remoteCommand name="sendAjaxical" update="somefield" action="#someBean.doSomething"/>
</h:form>

注册事件处理程序，我从the same answer you posted借用了以下内容：

var delay = (function() 
    var timer = 0;
    return function(callback, ms) 
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    ;
)();


jQuery("#input").keyup(function() 
    delay(function()  sendAjaxical(); , 2000); //sendAjaxical is the name of remote-command
);

【讨论】：

这很好用，我不知道remoteComand。我不得不将脚本的 jQuery 部分替换为：function ajaxDelay() delay(function() sendAjaxical(); , 2000); 并像这样称呼它<p:inputText onkeyup="ajaxDelay()"> 非常感谢！

【参考方案3】：

如果您选择 jquery/javascript 解决方案，则不能使用 Primefaces Ajax 组件。您必须实现自己的 javascript 函数（支持 ajax/xmlHttpRequest）并在半秒后触发该函数。

但还有另一种解决方案，一种变通方法：您可以使用 autocomplete 组件并使用 3 个有用的属性：valueChangeListener(A method expression that refers to a method for handling a valuchangeevent - 您可以使用它而不是 @ 987654324@，因为您不需要返回建议）、queryDelay (Delay to wait in milliseconds before sending each query to the server) 和 minQueryLength (Number of characters to be typed before starting to query - 如果您不想启动 ajax只输入一个字符后请求）。

我希望您会发现这个解决方案非常有趣...请在此处查看自动完成组件 (http://www.primefaces.org/showcase-labs/ui/autocompleteHome.jsf)，您可以通过阅读 3.0.M4 的 Primefaces 用户指南了解更多信息。

【讨论】：

这可以以我想要的延迟调用 bean 方法，但它没有更新（我需要），并且在执行 valueChangeListener 时也没有提交值。但答案帮助我找到了其他解决方案。非常感谢。

【参考方案4】：

快速破解将在onstart 中添加p:ajax 的延迟。在 javascript 中的某处定义以下函数：

function keyupDelay(request, cfg, delay) 
    delay = delay || 2000;// if no delay supplied, two seconds are the default seconds between ajax requests
    setTimeout(function() 
        cfg.onstart = null;
        request.send(cfg)
    , delay);
    return false;

基本上，该函数会在某个超时内触发 ajax 请求，同时为即时请求返回 false，并清空该超时请求上的 onstart，以免陷入令人讨厌的循环。

然后在p:ajax：

<p:ajax event="keyup" onstart="return keyupDelay(this, cfg)" />

这里的延迟参数是可选的，默认是2秒。