---
title: "useIdle 用法与示例"
description: "跟踪页面上的用户是否处于空闲状态。"
canonical: https://reactuse.com/zh-Hans/browser/useidle/
---

# useIdle

跟踪页面上的用户是否处于空闲状态。

`useIdle` 通过监听 `mousemove`、`mousedown`、`keydown`、`touchstart`、`resize` 和 `wheel` 等 DOM 事件来检测用户不活动状态。它返回一个布尔值，表示用户是否已闲置超过指定的时间（默认 60 秒）。你可以自定义超时时间、初始状态和重置闲置计时器的事件。

### 使用场景

- 当用户离开时自动保存草稿或暂停开销大的操作
- 为安全敏感的应用显示"你还在吗？"的提示
- 在一段不活动时间后调暗 UI 或暂停媒体播放

### 注意事项

- **SSR 安全**：在服务端渲染期间返回 `initialState` 值（默认 `false`）。服务端不会附加事件监听器。
- **可配置事件**：默认情况下，hook 在 `window` 上监听鼠标、键盘、触摸、调整大小和滚轮事件。你可以通过 `events` 参数覆盖事件列表。
- **相关 hooks**：参见 `usePageLeave` 了解检测光标离开页面视口的方法。

## Usage

```tsx live

function Demo() {
  const isIdle = useIdle(3e3);

  return (
    <div>
      <div>用户是否空闲: {isIdle ? "是的 😴" : "不是"}</div>
    </div>
  );
};

```

%%API%%