Question

我有一个EasyMDE的非常简单的实现，该实现在内部使用CodeMirror。因此，要检查输入是否更改，我需要按照EasyMDE文档中的说明进行this。效果很好，我什至可以检测到变化并获得输入值。

我现在面临的问题是，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
    });

我试图添加去抖动功能，但是它不起作用，这意味着当发生更改时，去抖动正在调用该功能。

    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);
    });

从Debounce Article

引用的去抖功能

更改事件时取消CodeMirror输入

0 个答案: