Skip to main content

3 posts tagged with "frontend"

View All Tags

关于 setTimeout 的一些小故事

· 5 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

@lideming曾经向我举过几个setTimeout的有趣例子。我先前不是很了解 JavaScript 的并发模型和事件循环，这些例子对我来说都算得上是巨坑无比了。

setTimeout 和事件循环​

函数 setTimeout 接受两个参数：待加入队列的消息和一个时间值（可选，默认为 0）。这个时间值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息并且栈为空，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。

下面的例子演示了这个概念（setTimeout 并不会在计时器到期之后直接执行）：

React 异步渲染内容

· 2 min read
VisualDust
VisualDust
Ordinary Magician | Half stack developer

在React(typescript)中渲染需即时加载的元素。主要思路是使用useEffect Hook加载内容，而后使用useState Hook在加载完成时重新渲染界面。简短的代码描述如下：

interface AsyncCompomentProps {
  func: () => Promise<JSX.Element>;
  default?: JSX.Element;
}

function AsyncComponent(props: AsyncCompomentProps) {
  const [loaded, setLoaded] = useState<JSX.Element>(null);
  useEffect(() => {
    props.func().then((result) => {
      setLoaded(result);
    });
  }, []);
  return loaded ? loaded : props.default ?? <div>Loading...</div>;
}

<AsyncComponent
  func={async () => {
    await new Promise((r) => setTimeout(r, 3000));
    return <div>hi</div>;
  }}
  default={<div>I'm loading...</div>}
/>;