Debounce after change input field

I have a table with a search field. After the search field has been filled in a API query is executed to retrieve a new selection based on the search field. This API execution is defined in the On Change event of the input box. 

Currently every character I type in results in a API query. This is not really what I now overload my API and my users gets a stuttering app. So I want to implement debounching (ie, waiting a few milliseconds to make sure the user is done with filling in the search key before executing the On Change event). 

This is as far as I have found not a native feature of OutSystems. I have found one (Web) component on the forge that has this feature (Client Side Validation) but since I create a mobile app this is not usable for me. I also don't want to use any of the other functionality at all so this is not really a good match.

Does anyone else have a good suggestion of using debouncing in an Mobile app?

Kind regards,

Vincent Koning

Hi, 

Waiting a few milliseconds might not be exactly what you want because if a user is typing slowly, you will have the same problem.

You can overcome this challenge by adding a Search button, if it fits your use case, or add a onblur handler or a on Enter key press which clicks on a hidden button or link which calls your current OnChange event. 


That one call happens in +- 250-350 ms is ok, even if the user isn't done typing yet. I want to prevent fast typers to overload my api with calls. 

Debounce is used a lot on the web and in mobile, it's a common practice. And most important of all, just typing without conformation (ie, a search button) and get the results you want is exactly the experience we want to get.

Thanks for the suggestion though :) 

So I got started on a small script to add debouncing to an input box. Using Client Side Validation as inspiration and such.

I added JQuery to my mobile solution and added the attached function as required script. I then call this function from my application. Debugging shows that my function is called and executed. However, one line in my function isn't working and that is;

Line 24: switch (widget.attr('type')) {

Debugging shows that widget.attr('type') results in Undefined. 'widget' has been defined with var widget = $('#' + widgetId);.

when you call console.log(widget); from within the script I get an object so it seems that this is working correctly. When recreating this in the console of my browser (via PreviewInDevices) I get the same behavior. I also can't get attribute values of other well-known attributes like name. 

Does anyone have any experience with this? 


Script:

function osDebounce(widgetId, debounceDelay) {

    var callback = function () {
        console.log('callback');
    };

    var debounceTimer;

    var setDebounce = function () {
        console.log('inside setDebounce');
        if (debounceDelay === 0) {
            executeValidation();
            return;
        }
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(callback, debounceDelay);
    };

    var widget = $('#' + widgetId);

    console.log(widget);
    console.log(widget.attr('type'));

    switch (widget.attr('type')) {
        case "text":
        case "password":
        case "email":
        case "number":
        case "search":
            widget
                .off('input', setDebounce)
                .on('input', setDebounce);
            break;
        case "radio":
        case "checkbox":
        case "date":
            widget
                .off('change', setDebounce)
                .on('change', setDebounce);
            break;
    }

}