У меня есть очень простая реализация 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);
});
Функция отката, на которую ссылается: Статья об отмене
codemirror.on('change', debounce(function(event, changeObj) {...}, 2000))
. Я не могу подтвердить правильность inputDebounce. Если с ним возникнут проблемы, попробуйте заменить его существующими реализациями, такими как Lodash debounce. Надеюсь это поможет. - person Estus Flask   schedule 02.06.2020