Отмена дребезга ввода CodeMirror при изменении события

У меня есть очень простая реализация EasyMDE, которая внутренне использует CodeMirror. Итак, чтобы проверить изменение ввода, мне нужно сделать это, как сказано в документации EasyMDE. Что отлично работает, и я даже могу обнаружить изменения и получить входное значение.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что ни в EasyMDE, ни в CodeMirror нет возможности устранения дребезга, и я синхронизирую ввод при изменении своих внутренних функций. При каждом входном событии я не могу позволить себе синхронизироваться с бэкэндом, так как это может стать очень дорогим.

Это код без дебаунса

    new EasyMDE({
        element: $refs.input,
        toolbar: ['bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', 'clean-block', '|', 'link', 'image', 'table', 'horizontal-rule' ,'|', 'preview'],
        previewClass: ['markdown', 'editor-preview'],
        renderingConfig: {
            codeSyntaxHighlighting: true,
            hljs: window.hljs
        }
    })
    .codemirror.on('change', function(event, changeObj) {  
        //backend sync code comes here
    });

Я попытался добавить функцию debounce, но она не работает, что означает, что debounce вызывает функцию, когда происходит изменение.

    function inputDebounce(func, wait, immediate) {
        var timeout;

        return function executedFunction() {
            var context = this;
            var args = arguments;

            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };

            var callNow = immediate && !timeout;

            clearTimeout(timeout);

            timeout = setTimeout(later, wait);

            if (callNow) func.apply(context, args);
        };
    };

    new EasyMDE({
        element: $refs.input,
        toolbar: ['bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', 'clean-block', '|', 'link', 'image', 'table', 'horizontal-rule' ,'|', 'preview'],
        previewClass: ['markdown', 'editor-preview'],
        renderingConfig: {
            codeSyntaxHighlighting: true,
            hljs: window.hljs
        }
    })
    .codemirror.on('change', function(event, changeObj) {  
        inputDebounce(function() { console.log('asdfasdf asdf asdf asdf asdf ') }, 2000);
    });

Функция отката, на которую ссылается: Статья об отмене


person Rehan    schedule 02.06.2020    source источник
comment
Проблема здесь в том, что debounce используется неправильно. При каждом событии изменения создается новая отмененная функция, у нее нет возможности что-либо отменить. Его всегда следует использовать как codemirror.on('change', debounce(function(event, changeObj) {...}, 2000)). Я не могу подтвердить правильность inputDebounce. Если с ним возникнут проблемы, попробуйте заменить его существующими реализациями, такими как Lodash debounce. Надеюсь это поможет.   -  person Estus Flask    schedule 02.06.2020
comment
Ага! Я понимаю. Я попробую это и дам вам знать. Спасибо :)   -  person Rehan    schedule 02.06.2020
comment
Подтверждаю, работает. Спасибо за вашу помощь!   -  person Rehan    schedule 02.06.2020
comment
Пожалуйста.   -  person Estus Flask    schedule 02.06.2020