javascript - clearInterval を使用して setInterval を停止したいが、役に立たない

Question

私が持っているのは、キーダウン イベントにリンクされている要素です。

同様の質問の答えはすべて、私が仕事をすることができないclearIntervalを指していました。

まず、キーアップ イベントを使用して、どの矢印キーが押されているかを確認しています。

var counter = 0;

var yPosArray = [];
var right = true;
var done = false;
var leftX;
var rightX;
$(document).keydown (function(e) 
{
    rightX = parseInt(($('#movingObject').css('left')).replace('px','')) + 50;
    leftX = parseInt(($('#movingObject').css('left')).replace('px',''));

    if(e.which == 39)// right
    {
        $('#movingObject').find('img').attr('src','assets/images/mario_right.png');
        right = true;
        $('#xRight').val(rightX);
        $('#xLeft').val(leftX);
        move();
    }
    if(e.which == 37)   //left  
    {
        $('#movingObject').find('img').attr('src','assets/images/mario_left.png');
        right = false;
        $('#xRight').val(rightX);
        $('#xLeft').val(leftX);
        move();
    }
    if(e.which == 38)   //up    
    {
        if($('#movingObject').css('bottom') == '0px' && !false)
        {
            done = true;
            gravity();
            done = false;
        }
    }
});

上記のように、この条件e.which == 37が満たされると、メソッドmove()が呼び出されます。left以下に示すように、move メソッドが行うことは、要素のstyle 属性を増やすことです。私がタイマーを持っている理由は、時間が経つにつれて速度が上がるようにするためですが、キーを離すとイベントの発生が停止するはずです。このため、最後のコード スニペットに見られるように、keyup イベントを呼び出したいと思います。そこで説明が続きます。

var speed = 0;
var maxspeed = 0;
var timer;
function move()
{   
     var counter = 0;
     timer = setInterval(function () 
     {
         maxspeed++;
         $('#movingObject').css('left', moveX + maxspeed + 'px');
         ++counter;
    }, 70);
}

上記のように、タイマー変数はmove関数が作成される前に宣言され、そこでsetIntervalメソッドに設定されました。変数はルート レベルにあるため、それが理にかなっていれば、すべての関数で使用できます。

以下に示すように、さまざまなキーをチェックするために keyup イベントを開始しました。

$(document).keyup (function(e) 
{
    var posX = parseInt(($('#movingObject').css('left')).replace('px',''));
    if(e.which == 39)// right
    {
        maxspeed = 0;
        clearInterval(timer);
        timer = 0;
    }
    if(e.which == 37)   //left  
    {
        maxspeed = 0;
        clearInterval(timer);
        timer = 0;
    }
    $('#movingObject').css('left', posX + 'px');
});

上記では、clearInterval を使用timerして 0 に設定しようとしましたが、その後は増加し続けています。

これは、私のコードの構造に関するすべてのスクリプトのフィドルです。

なぜこれが起こっているのですか？