Question: The operation delay is too high

[An-nima]

https://github.com/zauberzeug/nicegui/blob/aa2b30cfc6fed7a41ac00398dfb967915a29a0f9/nicegui/static/templates/js/event_handler.js

“jp_props.debounce” is 200.
This leads to high latency.

I added code to the first line: ("props.jp_props.debounce = 0;")

function eventHandler(props, event, form_data, aux) {
    props.jp_props.debounce = 0;
    if (props.jp_props.debug) {
        console.log('-------------------------');
        console.log('In eventHandler: ' + event.type + '  ' + props.jp_props.vue_type + '  ' + props.jp_props.class_name);
        console.log(event);
        console.log(props.jp_props);
        console.log('-------------------------');
    }
    if (!websocket_ready && use_websockets) {
        setTimeout(function(){ eventHandler(props, event, form_data, aux); }, 100);
        return;
    }
    let event_type = event.type;
    if (event_type == 'input' && (props.jp_props.vue_type == 'quasar_component') && (props.jp_props.disable_input_event)) {
        comp_dict[props.jp_props.id].value = event.target.value;
        return;
    }
    if (event_type == 'focusin' && (props.jp_props.vue_type == 'quasar_component')) {
        event_type = 'focus';
        event.target.value = comp_dict[props.jp_props.id].value;
    }
    if (event_type == 'focusout' && (props.jp_props.vue_type == 'quasar_component')) {
        event_type = 'blur';
        event.target.value = comp_dict[props.jp_props.id].value;
    }
    e = {
        'event_type': event_type,
        'id': props.jp_props.id,
        'class_name': props.jp_props.class_name,
        'html_tag': props.jp_props.html_tag,
        'vue_type': props.jp_props.vue_type,
        'event_target': event.target.id,
        'input_type': props.jp_props.input_type,
        'checked': event.target.checked,
        'data': event.data,
        'value': event.target.value,
        'page_id': page_id,
        'websocket_id': websocket_id
    };
    if (props.jp_props.additional_properties) {
        for (let i = 0; i < props.jp_props.additional_properties.length; i++) {
            e[props.jp_props.additional_properties[i]] = event[props.jp_props.additional_properties[i]];
        }
    }
    if ((event instanceof Event) && (event.target.type == 'file')) {

        files_chosen[event.target.id] = event.target.files;
        var files = [];
        for (let i = 0; i < event.target.files.length; i++) {
            const fi = event.target.files[i];
            files.push({name: fi.name, size: fi.size, type: fi.type, lastModified: fi.lastModified});
        }
        e['files'] = files;
    }
    if (form_data) {
        e['form_data'] = form_data;
    } else {
        if (event.currentTarget)
            e['event_current_target'] = event.currentTarget.id;
    }
    if (aux) e['aux'] = aux;
    if (event instanceof KeyboardEvent) {
        // https://developer.mozilla.org/en-US/docs/Web/Events/keydown   keyup, keypress
        e['key_data'] = {
            altKey: event.altKey,
            ctrlKey: event.ctrlKey,
            shiftKey: event.shiftKey,
            metaKey: event.metaKey,
            code: event.code,
            key: event.key,
            location: event.location,
            repeat: event.repeat,
            locale: event.locale
        }
    }

    let modifiers = props.jp_props.event_modifiers[event.type];
    console.log(new Date().getMilliseconds());
    if (modifiers && modifiers.debounce) {
        let callNow = modifiers.debounce.immediate && !modifiers.debounce.timeout;
        clearTimeout(modifiers.debounce.timeout);
        let set_e = e;
        modifiers.debounce.timeout = setTimeout(function () {
                modifiers.debounce.timeout = undefined;
                if (!callNow) send_to_server(set_e, 'event', props.jp_props.debug);
            }
            , modifiers.debounce.value);
        if (callNow) send_to_server(set_e, 'event', props.jp_props.debug);

    } else if (modifiers && modifiers.throttle) {
        if (!modifiers.throttle.timeout) {
            let set_e = e;
            modifiers.throttle.timeout = setTimeout(function () {
                    send_to_server(set_e, 'event', props.jp_props.debug);
                    modifiers.throttle.timeout = undefined;
                }
                , modifiers.throttle.value);
        }
    } else if (props.jp_props.debounce && (event.type == 'input')) {
        clearTimeout(props.timeout);
        let set_e = e;
        props.timeout = setTimeout(function () {
                send_to_server(set_e, 'event', props.jp_props.debug);
            }
            , props.jp_props.debounce);
    } else {
        send_to_server(e, 'event', props.jp_props.debug);
    }

    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
    if (props.jp_props.scroll && (event.type == 'click')) {
        event.preventDefault();
        c = document.getElementById(props.jp_props.scroll_to);

        c.scrollIntoView({
            behavior: props.jp_props.scroll_option,    // Default is 'smooth'
            block: props.jp_props.block_option,
            inline: props.jp_props.inline_option,
        });

    }
}

Then all operation become very fast.
But I can not find where the "jp_props.debounce" comes from.
Can someone explain? Thank you.

[falkoschindler]

It is an "event modifier" in the underlying JustPy framework:
https://justpy.io/tutorial/handling_events/#the-debounce-and-throttle-event-modifiers

We should make it configurable in NiceGUI. That's certainly something to tackle after our upcoming release of version 1.0.

[falkoschindler]

In NiceGUI 1.0 only high-frequent events like slider and joystick movements are throttled. All other events are sent immediately. And the generic event subscription element.on(type, handler, ...) excepts an argument throttle which is 0 (i.e. inactive) by default.