React - Throttle/debounce 微调器（加载消息） - 如果请求快于 X 毫秒则不显示

Question

我正在我的 React 应用程序中准备微调器。

效果很好。但是，一些 UX 提示说，spinner/loader/etc 应该在等待一段时间后显示。对于这个例子，假设它应该是 750 毫秒。

如何throttle/debounce（我仍然不确定有什么区别）重新渲染组件？

在上面的例子中，加载状态不应该随时出现。

Answer 1

您可以使用 setTimeout 和 clearTimeout 去抖动

componentDidMount() {
    let debounceTime = 100;
    let timeoutId = setTimeout(() => this.setState({ loading: true }), debounceTime);
    fakeApiCall().then(() => {
      clearTimeout(timeoutId);
      this.setState({
        loading: false
      })
    });
  }

一旦去抖动时间结束，它将加载设置为真。如果请求耗时少，会在promise中清零。

您可能想从 "initializing" 添加一个新状态或类似的状态；否则，如果您以 loading: false 启动应用程序（在等待去抖动器时），您最初会看到 "Ok, got data" 消息

此外，您可以使组件可配置并从 props 中获取去抖动时间

Answer 2

您可以创建一个 DelayedSpinner 组件，在 componentDidMount 中启动一个计时器，并在计时器结束后呈现微调器：

class DelayedSpinner extends Component {
    state = {
        showSpinner: false,
    };

    componentDidMount() {
        this.timer = setTimeout(
            () => this.setState({showSpinner: true}), 
            this.props.delay
        );
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }

    render() {
        return this.state.showSpinner && <Spinner />;
    }
}

用法：

render() {
    if (loading) return <DelayedSpinner delay={750} />

    return(
        {/* render loaded data */}
    );
}

然后你可以在你开始请求后渲染那个微调器，它只会在一定的延迟后显示。

Answer 3

有挂钩和效果：

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

const DelayedSpinner = ({ size }) => {
  const [showSpinner, setShowSpinner] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setShowSpinner(true), 750);

    return () => clearTimeout(timer);
  });

  return showSpinner && <Spinner size={size} color="primary" />;
};

export default DelayedSpinner;

React - Throttle/debounce 微调器（加载消息） - 如果请求快于 X 毫秒则不显示

React - Throttle/debounce spinner (loading message) - not show if request is faster than X milliseconds

javascript

throttling

debouncing

reactjs