Javascript 强制去盎司完成?

Javascript 强制去盎司完成?,javascript,reactjs,Javascript,Reactjs,我在我的handleChange方法上设置了这个debounce。除非我们有一个打字速度快的打字员,否则它能正常工作。如果您键入该字段,然后切换到下一个字段并继续键入,则它永远不会完成第一个字段的值更新。有没有一种方法可以确保无论一个人前进的速度有多快都能完成?最后,我的计划是通过API调用将数据写入数据库。如果我不能保证它总是抓取并发送数据,事情可能会很快失去同步 handleChange = (e) => { const targetName = e.target.name;

我在我的handleChange方法上设置了这个debounce。除非我们有一个打字速度快的打字员,否则它能正常工作。如果您键入该字段,然后切换到下一个字段并继续键入,则它永远不会完成第一个字段的值更新。有没有一种方法可以确保无论一个人前进的速度有多快都能完成?最后,我的计划是通过API调用将数据写入数据库。如果我不能保证它总是抓取并发送数据,事情可能会很快失去同步

handleChange = (e) => {
    const targetName = e.target.name;
    const targetValue = e.target.value;

    if (this.state.editingTimeout) {
      clearTimeout(this.state.editingTimeout);
    }

    this.setState({
      editing: false,
      editingTimeout: setTimeout(() => {
        console.log(`${targetName}: ${targetValue}`);
        this.setState({
          [targetName]: targetValue,
        });
      }, 300),
    });
  };

可以使用处理程序为每个不同的元素存储超时

//editingTimeout应该是状态为的对象
handleChange=(e)=>{
const targetName=e.target.name;
const targetValue=e.target.value;
this.setState(state=>{
clearTimeout(this.state.editingTimeout[targetName]);
返回({
编辑:错,
编辑超时:{
…state.editingTimeout,
[目标名称]:设置超时(()=>{
log(`${targetName}:${targetValue}`);
这是我的国家({
[目标名称]:目标值,
});
}, 300),
}
})
});

};你确定你的去抖动正确吗?使用去抖动,当导致回调去抖动的“操作”停止且去抖动持续时间到期时,将使用最新数据调用回调。看起来你正在取消状态更新,是吗?问题是您只有一个全局组件去盎司定时器,因此如果快速打字员到达下一个字段并继续以高于去盎司速率的速度打字,则最后一个字段未“完成”?是的,这正是问题所在。我基本上是尝试在运行时自动保存输入到字段中的值。我不希望在键入时出现延迟,也不希望每次击键时都重新保存值,因为我还希望在一定延迟后发送到数据库。我就是想不出正确的方法。许多表单管理员可以在更改和模糊时验证表单字段。您可能希望为每个字段实现一个
onBlur
回调,以便当用户切换到下一个字段时,它可以立即触发上一次验证,而不会延迟。我不确定是否保持单一的“去盎司”计时器仍然会在这里工作,尽管如此,你可能需要玩它。您是否考虑过任何表单管理包,如redux表单、formik等?这似乎是我需要的,谢谢!然而,当我打字时似乎有一个滞后。你认为这可能是原因吗?@AdamNorton是的,它会有延迟,你的原始代码也应该有延迟(如果输入被控制的话)。