Question

所需行为

使用requestAnimationFrame()为小时和分钟定义创建两个“微调器”。

当前行为

我已经改编this solution以合并两个“微调器”实例。

hours微分器正在工作，但是单击箭头按钮以输入/递减minutes值会改变hours值，而不是minutes值。

我尝试过什么

我尝试过的东西感觉有点重复，因为我试图两次调用requestAnimationFrame()，但我想不出更有活力的方式来执行它。

的jsfiddle

jsFiddle link

//adapted from:
//https://stackoverflow.com/a/28127763

// the hrs 'input' area
var $hrs_input=$('.hrs_input > span');

// the mins 'input' area
var $mins_input=$('.mins_input > span');

// common variables
// the starting hr and mins value
var number=0;
// isDown starting value
var isDown=0;
// delay in changing value
var delay=200;
// ??
var nextTime=0;

requestAnimationFrame(watcher);
requestAnimationFrame(watcher2); // eek?

// ======= BEGIN for hours handling

$(".hr_arrow").mousedown(function(e){handleMouseDown(e);});
$(".hr_arrow").mouseup(function(e){handleMouseUp(e);});
$(".hr_arrow").mouseout(function(e){handleMouseUp(e);});

function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
if (e.target.id=='add_hr') {
isDown=1;
}
else if (e.target.id!='add_hr')  {
isDown=-1;
}
}

function handleMouseUp(e){
e.preventDefault();
e.stopPropagation();
isDown=0;
}

function watcher(time) {

requestAnimationFrame(watcher);

if (time < nextTime) { 
return;
}

nextTime = time + delay;

// when adding
if (isDown === 1) {
// no conditional needed
number+=isDown;
$hrs_input.text(number);
}
// when subtracting
else if (isDown === -1) {
// conditional needed - only subtract if number is not 0
if (number !=0) {
number+=isDown;
$hrs_input.text(number);
}
}
}

// ======= END for hours handling


// ======= BEGIN for mins handling 
// just repeats the above hrs handling, with different 
// function names and div references

$(".min_arrow").mousedown(function(e){handleMouseDown2(e);});
$(".min_arrow").mouseup(function(e){handleMouseUp2(e);});
$(".min_arrow").mouseout(function(e){handleMouseUp2(e);});

function handleMouseDown2(e){
e.preventDefault();
e.stopPropagation();
if (e.target.id=='add_min') {
isDown=1;
}
else if (e.target.id!='add_min')  {
isDown=-1;
}
}

function handleMouseUp2(e){
e.preventDefault();
e.stopPropagation();
isDown=0;
}

function watcher2(time) {

requestAnimationFrame(watcher2);

if (time < nextTime) { 
return;
}

nextTime = time + delay;

// when adding
if (isDown === 1) {
// no conditional needed
number+=isDown;
$mins_input.text(number);
}
// when subtracting
else if (isDown === -1) {
// conditional needed - only subtract if number is not 0
if (number !=0) {
number+=isDown;
$mins_input.text(number);
}
}
}

// ======= END for mins handling

.hrs_input, .mins_input {
  background: #9be672 none repeat scroll 0 0;
  border-radius: 2px;
  color: #333;
  display: inline-block;
  font-family: arial;
  font-size: 13px;
  margin: 0 0 0 2px;
  min-width: 62px;
  padding: 0 5px;
}

.hr_arrow, .min_arrow {
  background: #ccc none repeat scroll 0 0;
  border: 1px solid #999;
  font-family: arial;
  font-size: 12px;
}

.hr_arrow:hover, .min_arrow:hover {
  cursor:pointer;
}

p {
  font-family:arial;
  font-size:14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Click the up and down arrows to in/decrease the hours.</p>
<p>Desired Behaviour:  For minutes in/decrementing to work the same way.</p>
<!-- BEGIN hrs -->
<span class="hrs_input">hrs:  <span>&nbsp;</span>
</span>
<span id="add_hr" class="hr_arrow">&#x25B2;</span>
<span class="hr_arrow">&#x25BC;</span>
<!-- END hrs -->
<!-- BEGIN mins -->
<span class="mins_input">mins:  <span>&nbsp;</span>
</span>
<span id="add_min" class="min_arrow">&#x25B2;</span>
<span class="min_arrow">&#x25BC;</span>
<!-- END mins -->

代码

这是一个相当庞大的代码块，但我认为问题可能来自调用requestAnimationFrame()两次，即：

requestAnimationFrame(watcher);
requestAnimationFrame(watcher2);

Answer 1

你永远不会在第二个观察者中传递if (time < nextTime)，因为第一个观察者总是在之前增加nextTime值。

这是因为两位观察者共享相同的全球time和nextTime变量（这可能也适用于number和isDown。）

看看这个小提琴：https://jsfiddle.net/kky0bdkx/

每个观察者都有不同的全局变量，以避免冲突。这是使用全局变量时的问题之一。一个更好的解决方案可能是找出一种用范围变量重写观察者的方法。

如何使用requestAnimationFrame（）创建小时和分钟微调器？

1 个答案: