metal-throttle

import { throttle } from 'metal-throttle'; // Example 1: Throttling a scroll event handler function handleScroll() { const scrollPosition = window.scrollY; console.log(`Scrolling: Current position is ${scrollPosition}px at ${Date.now()}`); // In a real app, you might update UI based on scroll position } // Throttled version of handleScroll, runs at most once every 200ms const throttledScrollHandler = throttle(handleScroll, 200); // Attach the throttled handler to the scroll event window.addEventListener('scroll', throttledScrollHandler); console.log("Scroll down rapidly to see the effect of throttling in the console (output will be limited)."); // Example 2: Throttling a button click handler let clickCount = 0; const button = document.createElement('button'); button.textContent = 'Click me (throttled)'; document.body.appendChild(button); function handleClick() { clickCount++; console.log(`Button clicked! Total clicks: ${clickCount} at ${Date.now()}`); } // Throttled version of handleClick, runs at most once every 1000ms (1 second) const throttledClickHandler = throttle(handleClick, 1000); button.addEventListener('click', throttledClickHandler); console.log("A button has been added to the page. Click it rapidly to observe how the console output is throttled."); // Cleanup (optional, for demonstration purposes) setTimeout(() => { window.removeEventListener('scroll', throttledScrollHandler); button.removeEventListener('click', throttledClickHandler); button.remove(); console.log("Demonstration complete. Event listeners removed."); }, 10000);