Primefaces spinner with delay

Goal

Create a Primefaces spinner with delay to avoid too many requests to the server

Description

This recipe is about the creation of a Primefaces spinner that delays its request to the server (using Primefaces’ remoteCommand and a custom ajax function) so that, we do not make a request to the server each time one clicks on the spinner’s button (up or down). With the trick shown here, you will only make a request after a given elapsed timeout after the user’s last click.

How to

Next, we have the steps required in this recipe:

  1. Define a Primefaces remoteCommand that will process the spinner (it will be invoked through a Javascript function after a specific timeout)
  2. Define the javascript function that will invoke the remoteCommand with a delay
  3. Configure the spinner to invoke the javascript function in the onchange event

Step 1 – The primefaces remoteCommand is specified as follows (the most important parts are highlighted in bold – the name of the remoteCommand, which must be unique, will be used to be invoked by the Javascript function; the process should take into account the remoteCommand itself plus the spinner to which the remoteCommand should be associated):

<p:remoteCommand name="remoteCommandId" process="@this,spinnerId" update="@form" />

Step 2 – The Javascript function is defined as (adapted from http://stackoverflow.com/questions/8401218/primefaces-keyup-event-delay):

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

function ajaxDelay(remoteCommandName) {
    delay(function() {
        remoteCommandName();
    }, 500);
}

Step 3 – The spinner is finally able to be defined and to glue together the remaining pieces (the remoteCommand is shown again here to easily understand the final result):

<p:spinner id="spinnerId" size="9" maxlength="9" min="0" max="500000" stepFactor="0.01"
  value="#{myBean.value}" onchange="ajaxDelay(remoteCommandId)" />
<p:remoteCommand name="remoteCommandId" process="@this,spinnerId" update="@form" />

And, with the previous steps we are now able to click the spinner several times with only one request to the server, as long as we do not exceed the 0.5 seconds between each click.

Explanations

This recipe is simple but a wonderful boost in terms of performance (personally, I think Primefaces’ team is doing a great job but, unfortunately, we do not have a delay property to control exactly this for this component yet) as we avoid excessive load to the server (it’s a lot different to have, for instance, 100 clicks on the spinner’s buttons, representing each one request, summing up another 100 requests to the server than grouping those 100 clicks in less requests, according to the time between clicks).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s