vuejs-tips / v-debounce Goto Github PK

// plugins/debounce-directive.js
function debounce(fn, delay) {
    let timeoutID = null;
    return function (...args) {
        clearTimeout(timeoutID);
        timeoutID = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('debounce', {
        mounted(el, binding) {
            if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
                console.warn('v-debounce directive is intended for use with <input> elements and v-model.lazy.');
                return;
            }

            const debounceFunction = debounce(() => {
                // Create and dispatch the 'change' event to trigger v-model.lazy update
                const event = new Event('change', { bubbles: true });
                el.dispatchEvent(event);
            }, parseInt(binding.value, 10) || 500); // Use the directive's value as the debounce delay

            el.addEventListener('input', (event) => {
                event.stopImmediatePropagation(); // Prevent immediate propagation to allow for debouncing

                // Call the debounce function which will emit the 'change' event after delay
                debounceFunction();
            }, true);
        },
        beforeUnmount(el) {
            // Clean up if necessary
            el.removeEventListener('input', el.oninput);
        }
    });
});