如何使用requestAnimationFrame（）創建小時和分鍾微調器？

Question

期望的行為

使用requestAnimationFrame()為小時和分鍾定義創建兩個“ spinners”。

當前行為

我已對該解決方案進行了調整，以合並兩個“微調”實例。

hours微調器正在工作，但是單擊箭頭按鈕以增加/減少minutes值將更改hours值，而不是minutes值。

我嘗試過的

我嘗試過的感覺有點重復，因為我嘗試過兩次調用requestAnimationFrame() ，但是我想不出更動態的方式來執行它。

jsFiddle

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>&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/

每個觀察者都有不同的全局變量，以避免沖突。 這是與全球人士合作時的問題之一。 更好的解決方案可能是找出一種使用作用域變量重寫觀察者的方法。