Как мне перестать нажимать следующий раз слишком много, чтобы не сломать мой ротатор изображения?

Я новичок в jquery и пытаюсь закодировать простой ротатор изображений, он работает хорошо на данный момент, за исключением того факта, что если вы нажмете "next" из кнопок "prev" слишком много раз очень быстро, он сломает ротатор изображения.

Вот html:

<div id="viewport">
    <div id="imageContainer">
        <div class="image" style="background-color:red;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:green;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:yellow;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:brown;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:purple;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
    </div>
</div>

<input type="button" name="prev" id="prev" value="prev" />
<input type="button" name="next" id="next" value="next" />

и jquery:

var ic = $('#imageContainer');
    var numItems = $('.image').size();
    var position = 0;
    ic.css('left', '0px');

    var inter; 
    var rotateTimeout;

    function rotate(){
        inter = setInterval(function(){
             if (position == (numItems - 1)) {
                console.log(position);
                $('.image').first().insertAfter($('.image').last());
                ic.css('left', '+=400px');
                position--;
            }
            ic.animate({opacity: 0.2, left: "-=400px"}, 1500, function(){
                ic.animate({opacity: 1.0}, 1000);
            });

            position += 1;
        }, 6000);

    }
    rotate();

    $('#prev').click(function () {
        console.log(position);
        if (position == 0) {
            $('.image').last().insertBefore($('.image').first());
            ic.css('left', '-=400px');
            position++;
        }
        ic.animate({
            left: "+=400px"
        });
        position -= 1;

        clearInterval(inter);
        clearTimeout(rotateTimeout);
        rotateTimeout = setTimeout(rotate, 10000);


    });

    $('#next').click(function () {
        if (position == (numItems - 1)) {
            console.log(position);
            $('.image').first().insertAfter($('.image').last());
            ic.css('left', '-400px');
            position--;
        }
        ic.animate({
            left: "-=400px"
        });
        position += 1;

        clearInterval(inter);
        clearTimeout(rotateTimeout);
        rotateTimeout = setTimeout(rotate, 10000);



    });

Вот демо ротатора.

Итак, как я могу либо остановить пользователя от нажатия кнопки слишком быстро, либо, возможно, только за клик за две секунды, чтобы ротатор мог делать то, что ему нужно?