Debouncing and Throttling User Input in APEX

Stop Flooding the Server

Attaching a live search to Key Release fires an AJAX call per keystroke. Typing “customer” generates 8 calls in under a second. Debouncing waits until the user stops typing. Throttling limits call frequency.

Debounce Implementation

function debounce(func, delay) {
    var timer;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() { func.apply(context, args); }, delay);
    };
}

var liveSearch = debounce(function() {
    var term = apex.item("P10_SEARCH").getValue();
    if (term.length >= 2) {
        apex.server.process("SEARCH_CUSTOMERS", {x01: term}, {
            dataType: "json",
            success: function(data) { renderResults(data.results); }
        });
    }
}, 300); // Wait 300ms after last keystroke

// Attach to item
$("#P10_SEARCH").on("keyup", liveSearch);

Throttle Implementation

function throttle(func, limit) {
    var lastCall = 0;
    return function() {
        var now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, arguments);
        }
    };
}

// Scroll-based lazy loading: check at most every 200ms
$(window).on("scroll", throttle(function() {
    if (nearBottom()) { loadMoreRows(); }
}, 200));

When to Use Which

Debounce for search inputs, form validation, and auto-save (fire once after user stops). Throttle for scroll handlers, resize events, and mousemove tracking (fire at regular intervals during continuous action). The typical debounce delay is 250 to 500ms for search, 1000 to 2000ms for auto-save.

APEX Dynamic Action Approach

If you prefer DAs, set a DA on Change (not Key Release) for text items. The Change event fires when the item loses focus, which is a natural debounce. For true live search, use Key Release with a JavaScript debounce wrapper as the True action.