如何在 React 中观察 window 调整大小停止

Question

我想在 window 停止调整大小时进行观察，因为目前如果我在 window 上收听 resize 事件，我只能收听调整大小 change 但是不知道调整大小何时停止。我检查了调整大小回调中的 event 参数，但没有找到有用的信息。

下面是我要完成的代码：

import React, { useState, useEffect } from "react";

export default function App() {
  const [windowResizing, setWindowResizing] = useState(false);

  const handleWindowResize = e => {
    setWindowResizing(true);
  };

  useEffect(() => {
    window.addEventListener("resize", handleWindowResize);

    return () => window.removeEventListener("resize", handleWindowResize);
  }, []);

  return <div>{JSON.stringify({ windowResizing })}</div>;
}

但这不起作用，因为 windowResizing 将在调整大小开始后保持 true，即使我已经停止调整大小。

那么有什么方法可以观察 window 何时停止调整大小，然后我可以根据此调用 setState？

Answer 1

浏览器中没有真正的“调整大小状态”； resize 事件发生然后结束。

您可以通过在每个 resize 事件上将状态变量设置为 true 来模拟您自己的调整大小状态，并启动一个新的超时将其重置回 false一段时间后。

例子

import React, { useState, useEffect } from "react";

export default function App() {
  const [windowResizing, setWindowResizing] = useState(false);

  useEffect(() => {
    let timeout;
    const handleResize = () => {
      clearTimeout(timeout);

      setWindowResizing(true);

      timeout = setTimeout(() => {
        setWindowResizing(false);
      }, 200);
    }
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <div>{JSON.stringify({ windowResizing })}</div>;
}

如何在 React 中观察 window 调整大小停止

How to observe when window resize stop in React

javascript

resize

reactjs