0
期望的行爲如何使用requestAnimationFrame（）創建小時和分鐘微調器？
創建小時和分鐘定義使用requestAnimationFrame()兩個「微調」。
當前行爲
我已經適應this solution納入兩個 「微調」 的實例。
的hours旋轉器正在工作，但是上的箭頭按鈕點擊在/遞減minutes值正在改變，而不是minutes值hours值。
我已經試過
我已經試過感覺有點重複，我已經試過打電話給requestAnimationFrame()兩次，但我想不出來執行它更加動態的方式。
的jsfiddle
//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> </span>
</span>
<span id="add_hr" class="hr_arrow">▲</span>
<span class="hr_arrow">▼</span>
<!-- END hrs -->
<!-- BEGIN mins -->
<span class="mins_input">mins: <span> </span>
</span>
<span id="add_min" class="min_arrow">▲</span>
<span class="min_arrow">▼</span>
<!-- END mins -->代碼
它的代碼一個相當龐大的一塊，但我想這個問題可能AR ISE從調用requestAnimationFrame()兩次，即：
requestAnimationFrame(watcher);
requestAnimationFrame(watcher2);