A small (376B) lazy function scheduler for a butter smooth main thread
Workshy is a throttle
utility that rate limit, queue, and distribute function executions over time to prevent the main thread from becoming unresponsive.
Unlike a standard throttle function, and to ensure non-blocking rendering and responsive UIs, workshy
break up functions into smaller chunks executed over time if necessary.
This module is available in three formats:
- ES Module:
dist/workshy.mjs
- CommonJS:
dist/workshy.js
- UMD:
dist/workshy.min.js
$ npm install --save workshy
The script can also be directly included from unpkg.com:
<script src="https://unpkg.com/workshy"></script>
import workshy from 'workshy';
// dummy function doing heavy work
const greet = () => 'hello world';
// queue and call function
workshy(greet)();
// => 'hello world'
// tasks are only called once, but
// multiple calls increases priority
const a = workshy(x => console.log(`A: ${x}`));
const b = workshy(x => console.log(`B: ${x}`));
b(1);
a(1);
a(2);
// => A: 2
// => B: 1
// manually define priority
const func = workshy(greet, {priority: 2});
// force it to be called immediately
const func = workshy(greet, {force: true});
// workshy distribute the work over time to
// make sure the main thread runs butter smooth
for (let i = 0; i < 5000; i++) {
workshy(greet)(); // => this won't block UI
}
Returns: function
Type: function
Accepts any function a returns a function
(a function that wraps your original function). Call returned function to queue task.
The returned function
will execute your function with the latest arguments provided to it as soon as possible based on queue length and prioroty.
Important: Task are only called once.
Calling the same task multiple times increases its priority.
Type: Number
Default: 0
Tasks are sorted by priority. Functions with high priority are called first.
Important: Priority also increase if a task is called multiple times.
workshy(() => console.log('Hello World'), {force: false, priority: 2});
//=> 'Hello World'
Type: Boolean
Default: false
workshy(() => console.log('Hello World'), {force: false, priority: 2});
//=> 'Hello World'
This is inspired by the talk The Virtue of Laziness: Leveraging Incrementality for Faster Web UI
MIT © Terkel Gjervig