{"library":"metal-throttle","title":"Metal Throttle Utility","description":"The `metal-throttle` package provides a utility function to limit the rate at which a function can be called. This is essential for optimizing performance in web applications by preventing excessive execution of handlers for frequent events like scrolling, resizing, or rapid clicks. It ensures a function executes at most once within a specified time window, discarding subsequent calls until the timeout expires. As part of the broader Metal.js ecosystem, it aims to offer a reliable and efficient throttling mechanism. Currently at version `3.0.1`, it is a stable utility. Without more specific release information, its cadence is generally aligned with the Metal.js project. Key differentiators typically revolve around its integration within the Metal.js framework, potentially offering optimizations or API consistency tailored for that environment, though basic throttling logic is common across many libraries.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install metal-throttle"],"cli":null},"imports":["import { throttle } from 'metal-throttle';","const { throttle } = require('metal-throttle');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { throttle } from 'metal-throttle';\n\n// Example 1: Throttling a scroll event handler\nfunction handleScroll() {\n  const scrollPosition = window.scrollY;\n  console.log(`Scrolling: Current position is ${scrollPosition}px at ${Date.now()}`);\n  // In a real app, you might update UI based on scroll position\n}\n\n// Throttled version of handleScroll, runs at most once every 200ms\nconst throttledScrollHandler = throttle(handleScroll, 200);\n\n// Attach the throttled handler to the scroll event\nwindow.addEventListener('scroll', throttledScrollHandler);\n\nconsole.log(\"Scroll down rapidly to see the effect of throttling in the console (output will be limited).\");\n\n// Example 2: Throttling a button click handler\nlet clickCount = 0;\nconst button = document.createElement('button');\nbutton.textContent = 'Click me (throttled)';\ndocument.body.appendChild(button);\n\nfunction handleClick() {\n  clickCount++;\n  console.log(`Button clicked! Total clicks: ${clickCount} at ${Date.now()}`);\n}\n\n// Throttled version of handleClick, runs at most once every 1000ms (1 second)\nconst throttledClickHandler = throttle(handleClick, 1000);\n\nbutton.addEventListener('click', throttledClickHandler);\n\nconsole.log(\"A button has been added to the page. Click it rapidly to observe how the console output is throttled.\");\n\n// Cleanup (optional, for demonstration purposes)\nsetTimeout(() => {\n  window.removeEventListener('scroll', throttledScrollHandler);\n  button.removeEventListener('click', throttledClickHandler);\n  button.remove();\n  console.log(\"Demonstration complete. Event listeners removed.\");\n}, 10000);\n","lang":"javascript","description":"Demonstrates how to import and use the `throttle` function with both scroll and click events to limit their execution rate over time.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}