轻量节拍器不起作用？

Question

我试图在这里制作一个只有javascript和Jquery的简单视觉节拍器。 它似乎不能很好地工作，我无法弄清楚原因。

你呢？

＆＃13;

＆＃13;

function metronome() {
                        
             
             var slidevalue = document.getElementById('speed').value;
             var delay = 1000 / ((slidevalue * 9) / 60);
             var timer= setInterval(function(){ 
                  
        
       setTimeout(function(){ $("#metronome").css({"background-color":"red"});},delay);
       setTimeout(function(){ $("#metronome").css({"background-color":"green"});},2*delay);
              
       }, 2*delay);
    }

＆＃13;

.round {
    
    border-radius: 50%;
	width: 20px;
	height: 20px; 
    margin: 0 auto;
    border: solid 2px #59B3AD;
    border-color:#59B3AD;
    
} 
 .center {
   margin:0 auto;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="range" id="speed" min="1" max="20" step="2" onchange="metronome()" class="center">
<div id="metronome" class="round"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当滑块更改时，您需要先清除之前的间隔，然后再设置新的间隔。同时使用setInterval和setTimeout执行此任务也是多余的 - setInterval本身也可以。{/ p>

这是一个有效的例子：

var prev_interval;
var tick_flip;

function metronome() {
  var slidevalue = document.getElementById('speed').value;
  var delay = 1000 / ((slidevalue * 9) / 60);
  clearInterval(prev_interval);
  prev_interval = setInterval(function() {
    if (tick_flip) {
      $("#metronome").css({
        "background-color": "red"
      });
      tick_flip = false;
    } else {
      $("#metronome").css({
        "background-color": "green"
      });
      tick_flip = true;
    }
  }, delay);
}

metronome();

.round {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  border: solid 2px #59B3AD;
  border-color: #59B3AD;
}
.center {
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="range" id="speed" min="1" max="20" step="2" onchange="metronome()" class="center">
<div id="metronome" class="round"></div>