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;
    }

}