Targeting and Manipulating setInterval Timer Value

Question

I have a simple function that changes the color of a square from red to blue every 2 seconds. I need the speed of the setInterval to reflect the value in the counter. I can't seem to figure out how to target the time value in the setInterval. No jQuery, thanks. Heres a demo of my code.

function Tempo() {
  var tempoVal = document.getElementById("tempo-value");
  var tempoBtn = tempoVal.querySelectorAll("[data-btn]");
  var tempoNum = tempoVal.querySelector("[data-value]");
  for (var i = 0; i < tempoBtn.length; i++) {
    tempoBtn[i].onclick = function() {
      if (this.getAttribute("data-btn") == "-") {
        tempoNum.innerHTML = parseFloat(tempoNum.innerHTML) - 1;
      } else if (this.getAttribute("data-btn") == "+") {
        tempoNum.innerHTML = parseFloat(tempoNum.innerHTML) + 1;
      }
    };
  }
}

let myTempo = new Tempo(document.getElementById("tempo-value"));

//BLOCK
setInterval(function() {
  var block = document.getElementById("block");
  block.classList.toggle("color");
}, 2000);

#tempo-value {
  font-family: Sans-Serif;
  font-size: 24px;
  text-align: center;
  padding: 16px;
  user-select: none;
}

.btn {
  display: inline-flex;
  cursor: pointer;
}

.value {
  display: inline-block;
  width: 40px;
  text-align: right;
}

#block {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}

#block.color {
  background-color: blue;
}

<div id="tempo-value">
  <div data-btn='-' class="btn">&#9669</div>
  <div data-value class="value">1</div><span> second(s)</span>
  <div data-btn='+' class="btn">&#9659</div>
</div>
<div id="block"></div>

score 2 · Accepted Answer · answered Jan 05 '18 at 00:28

You can assign setTimeout / setInterval to a variable. Then use clearTimeout / clearInterval to remove it when necessary. Then set new one again. See code below:

function Tempo() {
  var toggle = function() {
    document.getElementById('block')
      .classList.toggle('color');
  }
  var t = 1000;
  var blink = setInterval(toggle, t);
  var tempoVal = document.getElementById('tempo-value');
  var tempoBtn = tempoVal.querySelectorAll('[data-btn]');
  var tempoNum = tempoVal.querySelector('[data-value]');
  for (var i = 0; i < tempoBtn.length; i++) {
    tempoBtn[i].onclick = function() {
      clearInterval(blink);
      tempoNum.innerHTML = +
        this.getAttribute('data-btn') +
        +tempoNum.innerHTML;
      t = 1000 * tempoNum.innerHTML;
      blink = setInterval(toggle, t);
    }
  }
};

let myTempo = new Tempo(document.getElementById('tempo-value'));

body,
html {
  height: 100%;
}

#tempo-value {
  font-family: Sans-Serif;
  font-size: 24px;
  text-align: center;
  padding: 16px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn {
  display: inline-flex;
  cursor: pointer;
}

.value {
  display: inline-block;
  width: 40px;
  text-align: right;
}

#block {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}

#block.color {
  background-color: blue;
}

<div id="tempo-value">
  <div data-btn='-1' class="btn">&#9669</div>
  <div data-value class="value">1</div><span> second(s)</span>
  <div data-btn='+1' class="btn">&#9659</div>
</div>

<div id="block"></div>

Targeting and Manipulating setInterval Timer Value

1 Answers1