Question

I am working on a Kiosk Touch Screen application and using the JQuery.keypad plugin and noticing some major performance issues. If you click a number of buttons in rapid succession the CPU gets pegged, the button clicks don’t keep up with the clicking and some button presses even get lost. On my dev machine this isn’t as noticeable, but on the Kiosk itself with 1 gig of ram it’s painful.

Trying the demo keypad at http://keith-wood.name/keypad.html#inline the one with multiple targets (which is the case with mine) has the exact same issues.

Does anyone have any suggestions on how we might be able to improve this? The Kiosk runs in Firefox only so something specific to that would work. I’m using v1.2.1 of jquery.keypad and just upgraded to v1.4.2 of jquery.

Answer 1

Looks like Keith Wood came through on the jQuery forums.

http://forum.jquery.com/topic/jquery-keypad-performance-issues

What was happening is on focus of the input the keypad kept being recreated. The very simple solution is to only recreate the keypad if the keypad target changes.

With code like this:

$('.inlineTarget').focus(function() {
    keypadTarget = this;
    $('#inlineTargetKeypad').keypad('change', {target: this});
});

Should be changed to the following to fix the issues:

var keypadTarget = null;
$('.inlineTarget').focus(function() {
    if (keypadTarget != this) {
        keypadTarget = this;
        $('#inlineTargetKeypad').keypad('change', {target: this});
    }
});

Leave an answer Keith and the points go to you.