useWebWorkerFn

Demo

当前时间：2024-10-31 08:41:20 778

这是一个演示，对包含 500 万个数字的大数组进行排序，使用 WebWorker 或不使用 WebWorker。
当发生 UI 阻塞时，时间停止。

用法

基本示例

import { useWebWorkerFn } from '@vueuse/core'

const { workerFn } = useWebWorkerFn(() => {
  // 在 Web Worker 中执行一些繁重的工作
})

带有依赖项

import { useWebWorkerFn } from '@vueuse/core'

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  dates => dates.sort(dateFns.compareAsc),
  {
    timeout: 50000,
    dependencies: [
      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js', // dateFns
    ],
  },
)

With local dependencies

TypeScript

import { useWebWorkerFn } from '@vueuse/core'

const pow = (a: number) => a * a

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  numbers => pow(numbers),
  {
    timeout: 50000,
    localDependencies: [pow]
  },
)

import { useWebWorkerFn } from '@vueuse/core'
const pow = (a) => a * a
const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  (numbers) => pow(numbers),
  {
    timeout: 50000,
    localDependencies: [pow],
  },
)

Web Worker

在开始使用此函数之前，我们建议您阅读 Web Worker 文档。

鸣谢

此函数是 Alessio Koci 的 useWorker 的一个 Vue 端口，得到了 @Donskelle 的帮助进行迁移。

类型声明

typescript

export type WebWorkerStatus =
  | "PENDING"
  | "SUCCESS"
  | "RUNNING"
  | "ERROR"
  | "TIMEOUT_EXPIRED"
export interface UseWebWorkerOptions extends ConfigurableWindow {
  /**
   * 在终止工作线程之前的毫秒数
   *
   * @default undefined
   */
  timeout?: number
  /**
   * 包含运行工作线程所需的外部依赖项的数组
   */
  dependencies?: string[]
  /**
   * An array that contains the local dependencies needed to run the worker
   */
  localDependencies?: Function[]
}
/**
 * 使用简单的语法运行耗时函数，而不会阻塞用户界面，使用 Promise 来实现。
 *
 * @see https://vueuse.org/useWebWorkerFn
 * @param fn
 * @param options
 */
export declare function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(
  fn: T,
  options?: UseWebWorkerOptions,
): {
  workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
  workerStatus: Ref<WebWorkerStatus, WebWorkerStatus>
  workerTerminate: (status?: WebWorkerStatus) => void
}
export type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>