{"library":"rafu","title":"rafu","description":"rafu is a lightweight JavaScript utility that provides a `requestAnimationFrame` shim and enhanced animation scheduling capabilities. It ensures that animations run smoothly and efficiently across different browser environments by offering a robust fallback for `requestAnimationFrame` where native support might be missing or prefixed. Beyond merely polyfilling, rafu includes a `throttled` utility for synchronizing function calls with the browser's repaint cycle, which is crucial for performance-sensitive tasks like scroll handling, resize events, or continuous input processing. The package is currently at version 1.2.0, with its latest update introducing explicit cancellation methods for both direct `rafu` calls and functions created with `rafu.throttled`. Its minimal footprint and focused functionality make it a straightforward choice for projects needing basic `requestAnimationFrame` management without introducing heavy dependencies.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rafu"],"cli":null},"imports":["import rafu from 'rafu';","import rafu from 'rafu';\nconst handle = rafu(() => {});\nrafu.cancel(handle);","import rafu from 'rafu';\nconst throttledScroll = rafu.throttled(() => {});"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import rafu from 'rafu';\n\nconst box = document.createElement('div');\nbox.style.width = '50px';\nbox.style.height = '50px';\nbox.style.backgroundColor = 'red';\nbox.style.position = 'absolute';\nbox.style.top = '0px';\nbox.style.left = '0px';\ndocument.body.appendChild(box);\n\nlet posX = 0;\nlet direction = 1;\n\nfunction animateBox() {\n  posX += direction * 2;\n  if (posX > window.innerWidth - 50 || posX < 0) {\n    direction *= -1;\n  }\n  box.style.left = `${posX}px`;\n  rafu(animateBox); // Schedule the next frame\n}\n\nanimateBox(); // Start the animation loop\n\n// Example of throttling a scroll event\nconst scrollHandler = () => {\n  console.log('Scroll event throttled by rafu:', window.scrollY);\n};\n\nconst throttledScrollHandler = rafu.throttled(scrollHandler);\nwindow.addEventListener('scroll', throttledScrollHandler);\n\n// To stop the animation after some time (demonstrating rafu.cancel)\nsetTimeout(() => {\n  const animationId = rafu(() => console.log('This will be cancelled'));\n  rafu.cancel(animationId);\n  console.log('Animation scheduled and then cancelled.');\n  window.removeEventListener('scroll', throttledScrollHandler);\n  console.log('Scroll handler removed.');\n}, 5000);\n","lang":"javascript","description":"Demonstrates scheduling a simple animation loop with `rafu` and throttling a scroll event handler using `rafu.throttled`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}