1 min readJan 16, 2018
Hey marcus 👋
I’m not 100%
sure I follow as I wasn’t able to replicate your issue.
First I created a real simple set up, it worked as expected firing both when switching between by tabbing and continuing to type 👍
const mountNode = document.querySelector('#app')class InputDebounce extends React.Component {
broadcastChange = (value) => {
console.info(value)
}
render() {
return (
<div>
<input type="text" name="inputOne" onChange={debounce((e) => this.broadcastChange('ONE'), 5000)}/>
<input type="text" name="inputTwo" onChange={debounce((e) => this.broadcastChange('TWO'), 1000)}/>
</div>
)
}
}ReactDOM.render(
<InputDebounce/>,
mountNode
)
I then created a component for input
and created the following
const mountNode = document.querySelector('#app')class CloneInput extends React.Component {
broadcastUpdate = (value) => {
console.info(value)
}
render () {
return (
<input type="text" onChange={debounce(() => this.broadcastUpdate(this.props.value), this.props.delay)}/>
)
}
}class InputDebounce extends React.Component {
render() {
return (
<div>
<CloneInput value="ONE" delay="1000"/>
<CloneInput value="TWO" delay="5000"/>
</div>
)
}
}ReactDOM.render(
<InputDebounce/>,
mountNode
)
In both cases, the debounce
function worked as expected 👍
The debounce
function used was the following
const debounce = (func, delay) => {
let inDebounce
return function() {
const context = this
const args = arguments
clearTimeout(inDebounce)
inDebounce = setTimeout(() =>
func.apply(context, args)
, delay)
}
}
I hope that can help you out. The debounce
function works as expected but it could possibly be how it has been integrated into theReact
code that could be causing the issue.