Jhey Tompkins
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.

--

--

Jhey Tompkins
Jhey Tompkins

Written by Jhey Tompkins

I make awesome things for awesome people!

No responses yet