fyrirlestrar/10/daemi/events/timeout.html

<!doctype html>
<html lang="is">
  <head>
    <meta charset="utf-8">
    <title>Timeout og interval</title>
    <style>
    body {
      background-color: #fff;
      color: #000;
      transition:
        background-color 1.5s ease-in-out,
        color 1.5s ease-in-out;
    }
    </style>
  </head>
  <body>
    <div>Byrja að blikka aftir 1 sek</div>

    <script>
    let interval;
    let dark = false;

    function blink() {
      console.log('blink');

      const bg = dark ? '#fff' : '#000';
      const color = dark ? '#000' : '#fff';
      dark = !dark;

      document.body.style.backgroundColor = bg;
      document.body.style.color = color;
    }

    function start() {
      const div = document.querySelector('div');

      // fjarlægja texta
      div.removeChild(div.childNodes[0]);

      // setja inn nýjan texta
      div.appendChild(document.createTextNode('Blikka! Hætta með ESC'));

      // byrja að blikka
      interval = window.setInterval(blink, 1500);
    }

    // binda ESC til að hætta að blikka
    const ESC_KEY_CODE = 27;
    document.addEventListener('keyup', (e) => {
      if (e.keyCode === ESC_KEY_CODE) {
        window.clearInterval(interval);
      }
    });

    window.setTimeout(start, 1000);
    </script>
  </body>
</html>