1. /**
  2. * Throttles DOM element requests to limit the rate of function calls.
  3. *
  4. * @param {Function} func The function to throttle.
  5. * @param {number} delay The delay in milliseconds between requests.
  6. * @param {HTMLElement} element The DOM element to associate the throttling with.
  7. */
  8. function throttleDOM(func, delay, element) {
  9. let timeoutId = null;
  10. let lastExecTime = 0;
  12. const throttledFunc = function(...args) {
  13. const now = Date.now();
  14. const timeSinceLastExec = now - lastExecTime;
  16. if (!timeoutId) {
  17. if (timeSinceLastExec >= delay) {
  18. func.apply(this, args); // Execute if enough time has passed
  19. lastExecTime = now;
  20. } else {
  21. timeoutId = setTimeout(() => {
  22. func.apply(this, args); // Execute after delay
  23. lastExecTime = Date.now();
  24. timeoutId = null;
  25. }, delay - timeSinceLastExec);
  26. }
  27. }
  28. };
  30. // Attach the throttled function to the element
  31. element.addEventListener('click', throttledFunc);
  32. }
  34. export default throttleDOM;

Add your comment