J'aimerais savoir comment utiliser setTimeout()
sur ReactJS, car je fais ceci:
timerid = setTimeout( () => this.reqMaq( obj['fkmaqid'] ), 2000 )
et il appelle deux fois la fonction this.reqMaq()
.
Comment puis-je empêcher le premier appel? et juste garder l'appel après l'heure?
Ici c'est le composant:
reqMaq (maqid) {
return fetch(`/scamp/index.php/batchprodpry/${maqid}`, {credentials: 'same-Origin'})
.then(req => {
if (req.status >= 400) {
throw new Error("Bad response from server")
}
return req.json()
})
.then(json => this.processMaqReq(json))
.catch(function(error) {
console.log('request failed', error)
})
}
handleChangeMaq (event) {
event.preventDefault()
if (event.target.value.length > 0) {
let obj = this.state.obj
obj['fkmaqid'] = VMasker.toPattern(event.target.value, "99-99-99-99")
// if (timerid) {
// clearTimeout(timerid)
// }
// timerid = setTimeout(() => {
// if (!isRunning) {
// this.reqMaq(obj['fkmaqid'])
// }
// }, 2000)
const fx = () => this.reqMaq( obj['fkmaqid'] )
timerid = setTimeout( fx, 2000 )
this.setState({ obj: obj })
}
}
render() {
return (
<div className="form-group">
<label htmlFor="maquina">Máquina</label>
<input type="text" className="form-control" id="maquina"
name="maquina"
placeholder="Maquina"
value={this.state.obj['fkmaqid'] || ''}
onChange={this.handleChangeMaq}
ref={node => {
input1 = node
}}
required="required"
/>
</div>
)
}
Je vous remercie.
Essaye ça:
if (timerid) {
clearTimeout(timerid);
}
timerid = setTimeout(() => {
this.reqMaq(obj['fkmaqid'])
}, 2000);
Cela devrait faire l'affaire
const fx = () => this.reqMaq( obj['fkmaqid'] )
timerid = setTimeout( fx, 2000 )
La raison pour laquelle this.reqMak()
est appelé deux fois est subtile.
Dans votre exemple, vous utilisez un appel réel à reqMak
pour définir le pointeur de votre fonction pour setTimeout()
. Il s’appelle pour la première fois lors de la configuration de setTimeout
; la deuxième fois, c'est quand setTimeout()
est en marche, 2 secondes plus tard.
La raison suggérée pour la réponse suggérée est qu’elle n’appelle ni reqMak
'maintenant', ni plus tard, en tant que fonction appelée par setTimeout()
. Ce que cela fait est de passer une fonction anonyme ()=>{}
à setTimeout()
pour une exécution ultérieure. Et lorsque setTimeout()
exécute la fonction, 2 secondes plus tard, la fonction anonyme appelle this.reqMak()
, une fois.