如何消除对受控组件用户输入的延迟

如何解决如何消除对受控组件用户输入的延迟

我正在尝试取消对更新Codemirror的呼叫的弹跳。有点“奏效”，但问题是直到去抖调用之后，编辑器的值才被更新。因此，即使我按空格键，在去弹跳呼叫完成之前，光标位置也不会更新。

去抖动的调用是一个动作创建者，它流经多个sagas，reducer，最后更新该组件，从而在应用程序中产生明显的滞后。有没有一种方法可以使用户继续输入而不会出现这种滞后？

编辑：

this question很好地概括了我的问题：代码镜像从状态中获取值，而反跳阻止状态被触发。

const cmeditor = ({ selectedFile,updateCode }) => {

  const debounced = useCallback(
    _.debounce((code,selectedFile) => { updateCode({ code,selectedFile }); },1000),[],);

  const update = (editor,data,code) => {
    debounced(code,selectedFile);
  };

  return (
    <Container>
      <CodeMirror
        value={selectedFile.content}
        options={{ ...CODE_MIRROR_DEFAULT_OPTIONS,mode: getcodemode(EDITORS.CODE_MIRROR.value,selectedFile.mimeType) }}
        onBeforeChange={(editor,code) => update(editor,code)}
      />
    </Container>
  );
};

cmeditor.propTypes = {
  selectedFile: PropTypes.object.isrequired,updateCode: PropTypes.func.isrequired,};

export default cmeditor;

编辑2：

这是我使用本地状态和空闲计时器的实现。不太有效，但是差不多：

const cmeditor = ({ selectedFile,updateCode }) => {

  const [idleTimer,setIdleTimer] = useState(1);
  const [localCode,setLocalCode] = useState(selectedFile.content);

  useEffect(() => {
    setLocalCode(selectedFile.content);
  },[selectedFile.content]);

  // Add event listeners
  useEffect(() => {
    window.addEventListener('mousemove',resetIdleTimer);
    window.addEventListener('keypress',resetIdleTimer);

    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener('mousemove',resetIdleTimer);
      window.removeEventListener('keypress',resetIdleTimer);
    };
  },[]); // Empty array ensures that effect is only run on mount and unmount

  useEffect(() => {
    let timer = null;

    timer = setTimeout(() => {
      if (idleTimer === 0) {
          handleUpdate();
          clearTimeout(timer);
          // resetIdleTimer();
        } else {
          setIdleTimer(idleTimer - 1);
        }
    },1000);

    return () => clearTimeout(timer);
  },[idleTimer]);

  const resetIdleTimer = () => setIdleTimer(DEFAULT_IDLE_TIMEOUT);

  const handleUpdate = () => updateCode({ code: localCode,selectedFile });


  return (
    <Container>
      <CodeMirror
        value={localCode}
        options={{ ...CODE_MIRROR_DEFAULT_OPTIONS,code) => setLocalCode(code)}
      />
    </Container>
  );
};

解决方法

我对React不太熟悉，但是我假设所做的更改仅在update函数完成后的之后可见，其中包括去抖时间。您可以通过用async标记更新函数来使函数异步，尽管我不知道这是否会对您的框架产生任何副作用：

  const update = async (editor,data,code) => {
    debounced(code,selectedFile);
  };

作为替代方案，您可以考虑使用onChange触发器而不是onBeforeChange，因为它会在执行语句之前首先处理用户的交互。