mirror of
https://github.com/element-hq/element-web
synced 2024-11-28 20:38:55 +03:00
Change throttle to debounce
And add an explanation of whyI think one's more apropriate than the other for this.
This commit is contained in:
parent
78744b8bcf
commit
fcdbce1dda
1 changed files with 11 additions and 2 deletions
|
@ -18,7 +18,7 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
import { throttle } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
// Invoke validation from user input (when typing, etc.) at most once every N ms.
|
// Invoke validation from user input (when typing, etc.) at most once every N ms.
|
||||||
const VALIDATION_THROTTLE_MS = 200;
|
const VALIDATION_THROTTLE_MS = 200;
|
||||||
|
@ -118,7 +118,16 @@ export default class Field extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
validateOnChange = throttle(() => {
|
/*
|
||||||
|
* This was changed from throttle to debounce: this is more traditional for
|
||||||
|
* form validation since it means that the validation doesn't happen at all
|
||||||
|
* until the user stops typing for a bit (debounce defaults to not running on
|
||||||
|
* the leading edge). If we're doing an HTTP hit on each validation, we have more
|
||||||
|
* incentive to prevent validating input that's very unlikely to be valid.
|
||||||
|
* We may find that we actually want different behaviour for registration
|
||||||
|
* fields, in which case we can add some options to control it.
|
||||||
|
*/
|
||||||
|
validateOnChange = debounce(() => {
|
||||||
this.validate({
|
this.validate({
|
||||||
focused: true,
|
focused: true,
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue