{"id":16264,"library":"visibilityjs","title":"Visibility.js","description":"Visibility.js is a lightweight JavaScript library providing a robust wrapper around the native Page Visibility API, abstracting away vendor prefixes and offering enhanced utility functions. The current stable version is 2.0.2, with recent updates focusing on modernizing its distribution (removing support for legacy package managers in 2.0.0) and improving TypeScript definitions. Its core strength lies in intelligent timers and event handlers: `Visibility.every` creates timers that automatically pause or adjust intervals when a page is hidden, optimizing resource usage, while `onVisible` and `onHidden` provide direct callbacks for state changes. A key differentiator is its built-in fallback for older browsers, although this feature has a known limitation when a browser window loses focus but remains visible.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/ai/visibilityjs","tags":["javascript","page visibility api","visibility","polyfill","timer"],"install":[{"cmd":"npm install visibilityjs","lang":"bash","label":"npm"},{"cmd":"yarn add visibilityjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add visibilityjs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily exports a default `Visibility` object with all its methods. CommonJS `require` is not officially supported since v2.0.0.","wrong":"const Visibility = require('visibilityjs');","symbol":"Visibility","correct":"import Visibility from 'visibilityjs';"},{"note":"Methods like `every` are properties of the main `Visibility` object, not direct named exports.","wrong":"import { every } from 'visibilityjs';","symbol":"Visibility.every","correct":"import Visibility from 'visibilityjs';\nVisibility.every(1000, () => { /* ... */ });"},{"note":"Methods like `onVisible` are properties of the main `Visibility` object, not direct named exports.","wrong":"import { onVisible } from 'visibilityjs';","symbol":"Visibility.onVisible","correct":"import Visibility from 'visibilityjs';\nVisibility.onVisible(() => { /* ... */ });"}],"quickstart":{"code":"import Visibility from 'visibilityjs';\n\n// Example 1: Update a countdown every second only when the page is visible\nconst countdownTimerId = Visibility.every(1000, () => {\n  console.log('Page is visible! Updating countdown...');\n  // In a real app, you would update a UI element here\n});\n\n// Example 2: Check for emails every minute when visible, every 5 minutes when hidden\nconst emailCheckTimerId = Visibility.every(60 * 1000, 5 * 60 * 1000, () => {\n  console.log('Checking for new emails...');\n  // Make an AJAX request or similar\n});\n\n// Stop a timer after 10 seconds for demonstration\nsetTimeout(() => {\n  Visibility.stop(countdownTimerId);\n  console.log('Countdown timer stopped.');\n}, 10000);\n\n// Example 3: Perform an action when the page becomes visible\nVisibility.onVisible(() => {\n  console.log('Welcome back! Page is now visible.');\n  // Resume video playback or animations\n});\n\n// Example 4: Perform an action when the page becomes hidden\nVisibility.onHidden(() => {\n  console.log('Page is now hidden. Pausing heavy tasks.');\n  // Pause video, stop heavy animations, etc.\n});","lang":"typescript","description":"Demonstrates how to use `Visibility.every` for interval-based tasks, `Visibility.stop` to clear timers, and `Visibility.onVisible`/`onHidden` for reacting to page visibility state changes."},"warnings":[{"fix":"Migrate to npm/yarn and use modern JavaScript module imports (ESM). Consider transpilation for older browser environments if not already in place.","message":"Version 2.0.0 removed official support for legacy package managers and module loaders including Bower, Sprockets, and Component. Projects still relying on these will need to update their dependency management.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Be aware of this edge case when relying on the fallback behavior. This primarily affects very old browsers; modern browsers typically support the native API.","message":"The fallback mechanism (`lib/visibility.fallback.js`) for browsers without native Page Visibility API support has a known limitation: if the browser window loses focus but remains visually open (e.g., another application covers it partially), its state may incorrectly report as 'hidden'.","severity":"gotcha","affected_versions":">=1.2.0"},{"fix":"Always use `Visibility.stop(timerId)` to clear timers created by `Visibility.every(interval, callback)`.","message":"Timers created with `Visibility.every()` cannot be stopped using the standard `clearInterval()` function. A custom `Visibility.stop()` method must be used instead.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import Visibility from 'visibilityjs';` at the top of your module file, or that the library's script is properly included in your HTML before its usage.","cause":"The `Visibility` object was not correctly imported or the script was not loaded/executed in the global scope.","error":"Visibility is not defined"},{"fix":"Use `Visibility.stop(timerId)` to clear timers created by `Visibility.every()`. For example: `const timer = Visibility.every(...); Visibility.stop(timer);`","cause":"Attempting to use `clearInterval()` with the ID returned by `Visibility.every()`, which is not a standard `setInterval` ID.","error":"TypeError: clearInterval is not a function at Object.Visibility.every"},{"fix":"Ensure `visibilityjs` is installed correctly via npm/yarn (`npm install visibilityjs` or `yarn add visibilityjs`). If issues persist, check your `tsconfig.json` for `moduleResolution` settings.","cause":"TypeScript compiler cannot locate the type definitions for the `visibilityjs` package.","error":"TS2307: Cannot find module 'visibilityjs' or its corresponding type declarations."}],"ecosystem":"npm"}