---
title: "useScriptTriggerIdleTimeout()"
description: "在 Nuxt 就绪且空闲超时已过后加载脚本。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/docs/api/use-script-trigger-idle-timeout"
last_updated: "2026-08-11T09:33:16.977Z"
---

在 Nuxt 就绪且配置的空闲超时已过后加载非关键脚本。

该触发器会在 `onNuxtReady` 之后使用计时器；它不会等待浏览器的 `requestIdleCallback`。

## 函数签名

```ts
function useScriptTriggerIdleTimeout(options: IdleTimeoutScriptTriggerOptions): UseScriptTrigger
```

## 参数

```ts
export interface IdleTimeoutScriptTriggerOptions {
  /**
   * 在加载脚本之前等待的超时时间（毫秒）。
   */
  timeout: number
}
```

## 返回值

用于 `scriptOptions.trigger` 的 Unhead 触发函数。Nuxt 准备就绪后启动计时器，并在超时完成时加载脚本。释放使用者作用域会取消待处理的计时器，包括在 Nuxt 准备就绪之前释放的情况。该触发器不会在 SSR 期间安装计时器。

## Nuxt 配置用法

注册表条目和全局脚本可直接在 `nuxt.config` 中接受触发器：

<code-group>

```ts [注册脚本]
export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAnalytics: {
        id: 'GA_MEASUREMENT_ID',
        trigger: { idleTimeout: 3000 } // Nuxt 准备后 3 秒加载
      }
    }
  }
})
```

```ts [全局脚本]
export default defineNuxtConfig({
  scripts: {
    globals: {
      chatWidget: ['https://widget.example.com/chat.js', {
        trigger: { idleTimeout: 5000 } // Nuxt 准备后 5 秒加载
      }]
    }
  }
})
```

</code-group>

## 示例

### 基本用法

在 Nuxt 准备就绪后 5 秒加载脚本：

```ts
const script = useScript({
  src: 'https://example.com/analytics.js',
}, {
  trigger: useScriptTriggerIdleTimeout({ timeout: 5000 })
})
```

### 延迟加载分析脚本

延迟加载不需要立即加载的分析脚本：

```vue
<script setup lang="ts">
// 延迟 3 秒后加载 Google Analytics
const { status } = useScriptGoogleAnalytics({
  id: 'GA_MEASUREMENT_ID',
  scriptOptions: {
    trigger: useScriptTriggerIdleTimeout({ timeout: 3000 })
  }
})

// 延迟标签初始化后，注册表会发送初始页面浏览数据。
watch(status, (value) => {
  if (value === 'loaded') {
    console.log('Google Analytics loaded')
  }
})
</script>
```

### 延迟加载非必要的 UI

在加载小部件和搜索辅助工具之前，让关键资源优先加载：

```vue
<script setup lang="ts">
// 10 秒后加载聊天窗口脚本
const chatScript = useScript({
  src: 'https://widget.intercom.io/widget/abc123'
}, {
  trigger: useScriptTriggerIdleTimeout({ timeout: 10000 })
})

// 5 秒后加载搜索增强脚本
const searchScript = useScript({
  src: 'https://cdn.example.com/search-enhancement.js'
}, {
  trigger: useScriptTriggerIdleTimeout({ timeout: 5000 })
})
</script>
```

## 选择超时时间

- 为该功能选择延迟时间，而不是设置全站默认值。
- 当用户可能需要尽早使用该功能时，缩短延迟时间。
- 测量 Core Web Vitals，以确认该延迟确实有所帮助。
- 脚本接受一个触发器。使用自定义 promise，让超时与交互进行竞速。