# WebWorker Function
Creates a WebWorker based on a function, useful for offloading heavy tasks easily
The useWorkerFunction
function uses CancellablePromise
# Parameters
import { useWorkerFunction } from "vue-composable";
useWorkerFunction(fn, options);
interface WebWorkerFunctionOptions {
dependencies?: RefTyped<string[]>;
timeout?: RefTyped<number>;
}
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
fn | Function | true | Function we want to execute in the worker | |
options | WebWorkerFunctionOptions | false | undefined | Options for the webworker |
# State
The useWorkerFunction
function exposes the following reactive state:
import { useWorkerFunction } from "vue-composable";
const { promise, result, loading, error, cancelled } = useWorkerFunction();
State | Type | Description |
---|---|---|
promise | Promise | Current worker process |
result | any | Resolved value |
loading | boolean | Waiting for the worker to finish |
error | any | Promise error |
cancelled | boolean | Was cancelled |
# Methods
The useWorkerFunction
function exposes the following methods:
import { useWorkerFunction } from "vue-composable";
const { exec, cancel } = useWorkerFunction();
Signature | Description |
---|---|
exec(args?) | Resolves new promise |
cancel(error?) | Terminates the worker |
# Example
Sort
time: 1634454087218
If UI thread is working the refresh rate should go down and the time will stop
Numbers: []... []
# Code
<template>
<div>
<h3>Sort</h3>
<p>time: {{ now }}</p>
<div>
<label>Size</label>
<input v-model.number="size" type="number" />
</div>
<div>
<label>Timeout</label>
<input v-model.number="timeout" type="number" />
</div>
<p>
Numbers:
<b>{{ firstSegment }}</b
>...
<b>{{ lastSegment }}</b>
</p>
<ul>
<li>
<button @click="suffleArray">Function</button>
</li>
<li>
<button @click="suffleWorker" :disabled="working">Worker</button>
<p v-if="cancelled" :style="{ color: 'red' }">{{ error }}</p>
</li>
</ul>
</div>
</template>
<script>
<template>
<div>
<h3>Sort</h3>
<p>time: {{ now }}</p>
<h6>
If UI thread is working the refresh rate should go down and the time will
stop
</h6>
<div>
<label>Timeout</label>
<input v-model.number="timeout" type="number" />
</div>
<p>
Numbers:
<b>{{ firstSegment }}</b
>...
<b>{{ lastSegment }}</b>
</p>
<ul>
<li>
<button @click="suffleArray">Function</button>
</li>
<li>
<button @click="suffleWorker" :disabled="working">Worker</button>
<p v-if="cancelled" :style="{ color: 'red' }">{{ error }}</p>
</li>
</ul>
</div>
</template>
<script>
import {
defineComponent,
ref,
computed,
watchEffect
} from "@vue/composition-api";
import { useWorkerFunction, useDateNow } from "vue-composable";
const bubbleSort = input => {
let swap;
let n = input.length - 1;
const sortedArray = input.slice();
do {
swap = false;
for (let index = 0; index < n; index += 1) {
if (sortedArray[index] > sortedArray[index + 1]) {
const tmp = sortedArray[index];
sortedArray[index] = sortedArray[index + 1];
sortedArray[index + 1] = tmp;
swap = true;
}
}
n -= 1;
} while (swap);
return sortedArray;
};
export default defineComponent({
name: "worker-function-example",
setup() {
const timeout = ref(1500);
const { now } = useDateNow({ refreshMs: 10 });
const numbers = [...Array(50000)].map(() =>
Math.floor(Math.random() * 1000000)
);
const sortedNumbers = ref([]);
const firstSegment = computed(() => sortedNumbers.value.slice(0, 10));
const lastSegment = computed(() => sortedNumbers.value.slice(-10));
const suffleArray = () => {
sortedNumbers.value = bubbleSort(numbers);
};
const {
exec,
loading: working,
error,
cancelled
} = useWorkerFunction(bubbleSort, { timeout });
const suffleWorker = () => {
exec(numbers)
.then(x => (sortedNumbers.value = x))
.catch(x => (sortedNumbers.value = ["error", x]));
};
return {
now,
timeout,
firstSegment,
lastSegment,
suffleArray,
suffleWorker,
working,
error,
cancelled
};
}
});
</script>