[英]setTimeout ReactJS with arrow function es6
I'd like to know how to use setTimeout()
on ReactJS, because I'm doing this: 我想知道如何在ReactJS上使用
setTimeout()
,因为我这样做:
timerid = setTimeout( () => this.reqMaq( obj['fkmaqid'] ), 2000 )
and it calls twice the function this.reqMaq()
. 它调用两次函数
this.reqMaq()
。
How do I prevent the first call? 如何阻止第一次通话? and just keep the call after the time?
并且只是在时间之后保持通话?
Here it's the Component: 这是组件:
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>
)
}
Thank you. 谢谢。
Try this: 试试这个:
if (timerid) {
clearTimeout(timerid);
}
timerid = setTimeout(() => {
this.reqMaq(obj['fkmaqid'])
}, 2000);
This should do the trick 这应该可以解决问题
const fx = () => this.reqMaq( obj['fkmaqid'] )
timerid = setTimeout( fx, 2000 )
The reason that this.reqMak()
is being called twice is subtle. this.reqMak()
被调用两次的原因很微妙。
In your example you use an actual call to reqMak
to delineate your function pointer for setTimeout()
. 在您的示例中,您使用对
reqMak
的实际调用来描述setTimeout()
函数指针。 The first time it is called is when you set up setTimeout
; 第一次调用时是设置
setTimeout
; the second time is when setTimeout()
runs, 2 seconds later. 第二次是
setTimeout()
运行,2秒后。
The reason the suggested answer works is that it neither calls reqMak
'now', nor calls it later, as the function called by setTimeout()
. 建议的答案起作用的原因是它既不调用
reqMak
',也不调用它,因为setTimeout()
调用的函数。 What it does do is pass an anonymous function ()=>{}
to setTimeout()
for running later. 它做的是将匿名函数
()=>{}
传递给setTimeout()
以便稍后运行。 And when setTimeout()
runs the function, 2 seconds later, the anonymous function calls this.reqMak()
, once. 当
setTimeout()
运行该函数时,2秒后,匿名函数调用this.reqMak()
一次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.