title: Debouncing CodeMirror Input on change event
body: <p>I have a very simple implementation of <a href="https://easymde.tk/" rel="nofollow noreferrer">EasyMDE</a>, which internally uses <a href="https://codemirror.net/" rel="nofollow noreferrer">CodeMirror</a>. So to check for change of input I need to do <a href="https://github.com/Ionaru/easy-markdown-editor#event-handling" rel="nofollow noreferrer">this</a> as said in the EasyMDE docs. Which works fine and I can even detect for change and get the input value as well. </p>
  
  <p>The problem right now I facing is that, there is no debounce available in both EasyMDE/CodeMirror and I am syncing the input on change to my backend functionality. On every input event I cant afford to sync to backend as it is may become very expensive.</p>
  
  <p>This is the code without debounce</p>
  
  <pre class="lang-js prettyprint-override"><code>    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
      });
  </code></pre>
  
  <p>I tried to add debounce function and but it does not work, meaning the debounce is calling the function when the change happens.</p>
  
  <pre class="lang-js prettyprint-override"><code>    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 &amp;&amp; !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);
      });
  </code></pre>
  
  <p>Debounce function referenced from : <a href="https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086" rel="nofollow noreferrer">Debounce Article</a></p>