prevent "double" running the function

http://stackoverflow.com/questions/9729695/is-there-a-way-to-check-if-a-function-is-currently-running-in-jquery/9729740#9729740

HTML

<button id="run1">Run awesome animation</button>
<button id="run2">Run awesome animation (prevent queuing the code)</button>

<div class="circle c1"></div>
<div class="circle c2"></div>

CSS

.circle {
    border-radius:10px;
    height:20px;
    width:20px;
    background:green;
    position:absolute;
    top:30px;
    left:130px;
}
.c2 {
    left:160px;
    background-color:red;
}

JavaScript

// we are already wrapped within DomReady handler's closure
var circle1 = $('.c1'),
    circle2 = $('.c2'),
    animate1 = function () {
        circle1.animate({
            top: "+=10"
        }, 1000);
    },
    animate2 = function () {
        if (animate2running) return;
        animate2running = true;
        circle2.animate({
            top: "+=10"
        }, 1000, function () {
            animate2running = false;
        });
    },
    animate2running = false;

$('#run1').bind('click', animate1);
$('#run2').bind('click', animate2);