javascript - 要素の回転を一定に保つのに問題がありますか?

Question

私が現在取り組んでいるプロジェクトでは、1:1 回転が不可欠なホイールが必要です。

これまでのところ、クリック アンド ドラッグの回転メカニズムが動作するようになりましたが、問題は非常に不安定で、問題なく動作し、ある時点で (コードを変更せずに) 突然混乱することです。ページを更新してキャッシュをクリアしても、正常に回転しません。

ローカルサーバーからライブテストサーバーに移動した後、最初にこれに気付きました. もう1つの奇妙な特徴は、マウスがホイールの境界の外にある間は完全に回転し、内側に戻ると混乱し始めることです（画像に完全に重なる目に見えないSVG円の形のネズミ捕りでマウスの動きを検出します）。

全体は非常にシンプルです。

$('.mouse_trap').mousedown(function(){
        intervalvar = setInterval(monitorClicks, 24);
    }).mouseup(function(){
        clearInterval(intervalvar);
    })

人がホイールをクリックしてドラッグすると、それに応じて setInterval が設定され、停止します (その間、別の関数がマウスの位置を監視しています)。

function monitorClicks(){
    xrel = xpos - midx;
    yrel = -(ypos - midy);

    a = Math.atan2(yrel,xrel);
    a = a *  (180 / Math.PI);
    a = -a;

    roulette.css({
        '-webkit-transform' : 'rotate(' + a + 'deg)',
        '-ms-transform' : 'rotate(' + a + 'deg)',
        '-o-transform' : 'rotate(' + a + 'deg)',
        '-moz-transform' : 'rotate(' + a + 'deg)',
        'transform' : 'rotate(' + a + 'deg)'
    });

    console.log(a); 

}

マウスの位置を見つけ、中点を円の中心に合わせ、座標を使用して atan2 を適用して角度を取得します。

ここで実験を見つけることができます：

http://www.techgoldmine.com/spinny_thing/