0
望ましい行動requestAnimationFrame（）を使用してスピナーを作成するにはどうすればいいですか？
requestAnimationFrame()を使用して、時間と分の定義には2つの「スピナー」を作成します。
現在の動作
私は2つの "スピナー" のインスタンスを組み込むこと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 -->コード
それはコードのかなりかさばる塊だが、私はこの問題は、アーカンソーも思っています伊勢すなわち、二回requestAnimationFrame()を呼び出してから：最初のウォッチャーは、常に前にnextTime値を増加するため
requestAnimationFrame(watcher);
requestAnimationFrame(watcher2);