Viive ja rajoitus

Tapa	Suorituksia
Suoraan	0
Viive 300 ms	0
Rajoitus 300 ms	0

CSS

HTML

Javascript

/* Koodikoneen Run-painike suorittaa koodin uudelleen, jolloin samat
   käsittelijät liitettäisiin toistamiseen. Elementti korvataan kopiollaan:
   kopio ei peri tapahtumankäsittelijöitä. */
const puhdista = function (elementti) {
  const kopio = elementti.cloneNode(true);
  elementti.replaceWith(kopio);
  return kopio;
};

/**
 * Viive: suoritetaan vasta kun kutsut ovat tauonneet.
 *
 * @param {Function} funktio Suoritettava funktio
 * @param {number} viive Odotusaika millisekunteina
 * @returns {Function} Viivästetty funktio
 */
const viivasta = function (funktio, viive) {
  let tunniste = null;

return function (...parametrit) {
    /* Jokainen uusi kutsu peruu edellisen odotuksen */
    clearTimeout(tunniste);

tunniste = setTimeout(function () {
      funktio(...parametrit);
    }, viive);
  };
};

/**
 * Rajoitus: suoritetaan enintään kerran aikavälissä.
 *
 * @param {Function} funktio Suoritettava funktio
 * @param {number} vali Vähimmäisväli millisekunteina
 * @returns {Function} Rajoitettu funktio
 */
const rajoita = function (funktio, vali) {
  let odottaa = false;

return function (...parametrit) {
    if (odottaa) {
      return;
    }

funktio(...parametrit);
    odottaa = true;

setTimeout(function () {
      odottaa = false;
    }, vali);
  };
};

const kentta = puhdista(document.getElementById("kentta"));
const laskurit = { suoraan: 0, viive: 0, rajoitus: 0 };

const laske = function (nimi) {
  laskurit[nimi] += 1;
  document.getElementById(nimi).textContent = laskurit[nimi];
  console.log(nimi, laskurit[nimi]);
};

/* Sama tapahtuma, kolme eri käsittelyä. Kirjoita nopeasti ja vertaa
   lukuja: suoraan kasvaa joka näppäinpainalluksesta, viive vain kun
   lopetat, rajoitus tasaisin välein. */
kentta.addEventListener("input", () => laske("suoraan"));
kentta.addEventListener("input", viivasta(() => laske("viive"), 300));
kentta.addEventListener("input", rajoita(() => laske("rajoitus"), 300));

puhdista(document.getElementById("nollaa")).addEventListener("click", function () {
  for (const nimi of Object.keys(laskurit)) {
    laskurit[nimi] = 0;
    document.getElementById(nimi).textContent = "0";
  }

console.log("nollattu");
});

Kirjoita kenttään nopeasti

CSS

HTML

Javascript

Konsoli