.pixel-ratio

by Julien Etienne

HTML

<div class="pixel-ratio"></div>

CSS

@media screen and (min-width: 80em) {
   body{
     background: yellow;
   }
  
}

window.matchMedia('(min-width: 600px)');

JavaScript

function debounce(func, frameLength = 10) {
  let called = 0;
  let frame;

  const reset = function() {
    called = 0;
    frame = null;
  };

  const cancel = function() {
    cancelAnimationFrame(frame);
    reset();
  };

  const run = function(...args) {
    const context = this;

    if (frame != null) {
      cancelAnimationFrame(frame);
      reset();
    }

    frame = requestAnimationFrame(function tick() {
      if (++called === frameLength) {
        reset();

        func.apply(context, args);
      } else {
        frame = requestAnimationFrame(tick);
      }
    });
  };

  run.cancel = cancel;

  return run;
};

const thing =debounce(()=>{console.log('yo')},100);
document.addEventListener('click',thing)