按时间限制模态的最佳实践答案

【问题标题】：Best practice to limit modal by time按时间限制模态的最佳实践
【发布时间】：2019-12-29 20:46:54
【问题描述】：

我正在用 React Native 构建一个简单的测验应用程序。当用户得到正确答案时，我想显示一个弹出模式（React Native Elements），上面写着“Congratz”。我的工作如下：

<Overlay isVisible={{this.props.showModal}}>
  <Text>Congratz</Text>
</Overlay>

其中，showModal 是通过我的 Redux 和 Redux Thunk 操作中的调度设置的。但是，我想将此限制为仅显示 2 秒然后消失。实现这一目标的最佳做法是什么？

目前我的重击动作是：

export const showModal = () => {
  return (dispatch, getState) => {
    dispatch({ type: "SHOW_MODAL" });
    var start = new Date().getTime();
    var end = start;
    while (end < start + 2000) {
      end = new Date().getTime();
    }
    dispatch({ type: "HIDE_MODAL" });
  };
};

但这会锁定系统 2 秒？

【问题讨论】：

标签： react-native react-redux redux-thunk react-native-elements

【解决方案1】：

在调度SHOW_MODAL之后，我将使用简单的setTimeout函数调度HIDE_MODAL。

dispatch({ type: "SHOW_MODAL" });
setTimeout(() => dispatch({ type: "HIDE_MODAL" }), 2000);

【讨论】：