npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

worker-timers

v8.0.11

Published

A replacement for setInterval() and setTimeout() which works in unfocused windows.

Downloads

1,316,639

Readme

logo

worker-timers

A replacement for setInterval() and setTimeout() which works in unfocused windows.

version

Motivation

For scripts that rely on WindowTimers like setInterval() or setTimeout() things get confusing when the site which the script is running on loses focus. Chrome, Firefox and maybe others throttle the frequency at which they invoke those timers to a maximum of once per second in such a situation. However this is only true for the main thread and does not affect the behavior of Web Workers. Therefore it is possible to avoid the throttling by using a worker to do the actual scheduling. This is exactly what worker-timers does.

Getting Started

worker-timers is available as a package on npm. Run the following command to install it:

npm install worker-timers

You can then import the exported functions in your code like this:

import { clearInterval, clearTimeout, setInterval, setTimeout } from 'worker-timers';

The usage is exactly the same (despite of the error handling and the differentiation between intervals and timeouts) as with the corresponding functions on the global scope.

var intervalId = setInterval(() => {
    // do something many times
}, 100);

clearInterval(intervalId);

var timeoutId = setTimeout(() => {
    // do something once
}, 100);

clearTimeout(timeoutId);

Differentiation between Intervals and Timeouts

The native WindowTimers only maintain a single list of timers. But worker-timers maintains two separate lists to store the ids of intervals and timeouts internally. WindowTimers allows intervals to be cancelled by calling clearTimeout() and the other way round because it stores all timers in a single list. This is not possible with worker-timers.

const periodicWork = () => {};

// This will stop the interval.
const windowId = window.setInterval(periodicWork, 100);
window.clearTimeout(windowId);

// This will not cancel the interval. It may cancel a timeout.
const workerId = setInterval(periodicWork, 100);
clearTimeout(workerId);

Server-Side Rendering

This package is intended to be used in the browser and requires the browser to have support for Web Workers. It does not contain any fallback which would allow it to run in another environment like Node.js which doesn't know about Web Workers. This is to prevent this package from silently failing in an unsupported browser. But it also means that it needs to be replaced when used in a web project which also supports server-side rendering. The replacement should be straightforward, at least in theory, because each function has the exact same signature as its corresponding builtin function. But the configuration of a real-life project can be tricky. For a concrete example, please have a look at the worker-timers-ssr-example provided by @newyork-anthonyng. It shows the usage inside of a server-side rendered React app.

Angular (& Zone.js)

If worker-timers is used inside of an Angular app and Zone.js (which is the default) is used to detect changes, the behavior of worker-timers can be confusing. Angular is using Zone.js which is patching the native setInterval() and setTimeout() functions to get notified about the invocation of their callback functions. But Angular (more specifically Zone.js) is not aware of worker-timers and doesn't get notified about any callback invocations. Therefore Angular needs to be notified manually about state changes that occur inside of a callback function which was scheduled with the help of worker-timers.

Security contact information

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.