Jquery var++ & var-- rate

Question

Here is the current code(mouse down and drag to increase and decrease frame): http://jsfiddle.net/QHkfJ/

mousedown = false;
frame = 0;
mouse_x_last = 0;
$(document).ready
(
    function()
    {
        $("#load_overlay").mousedown
        (
            function()
            {
                mousedown = true;
            }
        );

        $("#load_overlay").mouseup
        (
            function()
            {
                mousedown = false;
            }
        );

        $("#load_overlay").mouseleave
        (
            function()
            {
                mousedown = false;
            }
        );

        $(window).mousemove
        (
            function(event)
            {
                mouse_x = event.pageX;

                if(mousedown == true)
                {
                    //if our current mouse position is greater than our last
                    if(mouse_x > mouse_x_last)
                    {
                        //if our frame is within the array
                        if(frame < 45)
                        {
                            //advance frame
                            frame++
                            //update debug frame#
                            $("#frame").html(frame);
                        }
                        else
                        {
                            //if our frame tries to exceed the array, reset to frame 0
                            frame = 0;
                        }
                        //set our last mouse position
                        mouse_x_last = mouse_x;
                    }

                    //if our current mouse position is lesser than our last
                    if(mouse_x < mouse_x_last)
                    {
                        //if our frame is within the array
                        if(frame > 0)
                        {
                            //decline frame
                            frame--
                            //update debug frame#
                            $("#frame").html(frame);
                        }
                        else
                        {
                            //if our frame tries to exceed the array, reset to set to 45
                            frame = 45;
                        }
                        //set our last mouse position
                        mouse_x_last = mouse_x;
                    }

                }

            }
        );
    }
);

My issue is the rate in which the ++ & -- increase the "frame". I would like a method to slow down that rate.

Thanks a lot.

Answer 1

Instead of using

$("#frame").html(frame);

You could try dividing by something:

$("#frame").html(Math.floor(frame / 5));

The above code will make it 5 times slower.

Fiddle

Answer 2

Here's my take on your idea. Define a width where the mouse is changing the frame rate. Set WIDTH accordingly.

Fiddle: http://jsfiddle.net/QHkfJ/5/

$( function() {
    var mouseX,
        frames = 0,
        isMousedown = false,
        WIDTH = 200, // Number of pixels, increase to slow down
        FRAMES_MAX = 45,
        framesInit = frame,
        ratio      = FRAMES_MAX / WIDTH,
        $frame     = $("#frame");

    $( "#load_overlay" ).on ( "mousedown", function( event ) {
        isMousedown = true;
        mouseX      = event.pageX;
        framesInit  = parseInt( $frame.text(), 10 );
    }).on( "mouseup mouseleave", function() {
        isMousedown = false;
    });

    $( window ).on( "mousemove", function(event) {
        if( !isMousedown ) {
            return false;
        }
        var x    = event.pageX,
            dx   = x - mouseX,
            diff = Math.max( Math.min( dx, WIDTH), -WIDTH );
        frames = Math.min( Math.max( parseInt( ratio * diff, 10 ), 0 ), FRAMES_MAX );
        $frame.text( frames );
    });
});