How to block the slider at run time?

Question

css

How can I block the slider at runtime?
Here is the code:

$('#left').click(function() {
    var carusel = $(this).parent('.slider')[0]
    var slide_width = 277
    $(carusel).find('.slider-track .slide').eq(0).clone().appendTo($(carusel).find('.slider-track'))
    $(carusel).find('.slider-track').animate({"margin-left": "-"+slide_width},650)
    setTimeout(function() {
      $(carusel).find('.slider-track .slide').eq(0).remove()
      $(carusel).find('.slider-track').css({'margin-left': 0})
    }, 700)
  })

The problem is that if you click on the arrow very quickly everything breaks

Answer 1

var im_running = false;
$('#left').click(function() {
if(im_running == false){
im_running = true;
//some logic
im_running = false;
}
});

Answer 2

Add a variable where to store the state of the slider? If there is an animation, then we do nothing