From d9a11cea4c09e1aab498c88d22a39a6cfe1dbad2 Mon Sep 17 00:00:00 2001 From: catarak Date: Wed, 13 Jul 2016 21:50:59 -0400 Subject: [PATCH] add debounce to editor input --- client/modules/IDE/components/Editor.js | 12 +++++++++--- package.json | 3 ++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index ccb6d52e..1e79bd21 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -15,6 +15,8 @@ window.CSSLint = CSSLint; import { HTMLHint } from 'htmlhint'; window.HTMLHint = HTMLHint; +import { debounce } from 'throttle-debounce'; + class Editor extends React.Component { componentDidMount() { @@ -28,10 +30,14 @@ class Editor extends React.Component { gutters: ['CodeMirror-lint-markers'], lint: true }); - this._cm.on('change', () => { // eslint-disable-line - // this.props.updateFileContent('sketch.js', this._cm.getValue()); + this._cm.on('change', debounce(200, () => { this.props.updateFileContent(this.props.file.name, this._cm.getValue()); - }); + })); + // this._cm.on('change', () => { // eslint-disable-line + // // this.props.updateFileContent('sketch.js', this._cm.getValue()); + // throttle(1000, () => console.log('debounce is working!')); + // this.props.updateFileContent(this.props.file.name, this._cm.getValue()); + // }); this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; this._cm.setOption('indentWithTabs', this.props.isTabIndent); this._cm.setOption('tabSize', this.props.indentationAmount); diff --git a/package.json b/package.json index 23b2dd8d..d55afffc 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "redux-form": "^5.2.5", "redux-thunk": "^2.1.0", "shortid": "^2.2.6", - "srcdoc-polyfill": "^0.2.0" + "srcdoc-polyfill": "^0.2.0", + "throttle-debounce": "^1.0.1" } }