How can I prevent re-clicking on an element? How to wait for the animation to finish?

Question

css

I wrote a script, the essence of which is that it displays the question in the form of a table with a title, then catches a click on the table element (row), passes the attribute of the selected line for further processing, hides this question, and in its place displays the next question from the list and so on until the end of the list of questions.
I hide the questions and then display a new one using jquery methods hide() and show() respectively. hide has an animation (animation is important to me) n-second.
The problem is that while this n-second animation is going on, no one forbids clicking many more times on the table and breaking the script, because each click will be caught.
How to solve this problem? How to allow clicking on an element only when a new question is displayed.

Now the code looks like this:

<div id="q1" class = "question">
  <h3 value='author'>твой любимый мультик?</h3>
  <table>		
    <tr><td value="1" >Аладин</td></tr>
    <tr><td value="2">Король и лев</td></tr>
    <tr><td value="3">Симпсоны</td></tr>			
  </table>
</div>

//issues предок вышеуказанного дива.
$('#issues table tr').mousedown(function (){
        var selector=this;
  var click=$('td:first-child',this).attr('value')//атрибут строчки выбранной.
        display(click)// функция которая скрывает вопрос и отображает следующий
}

There is, in my opinion, an absurd solution: declare a variable, set it to false on click, and set it to true in the hide() callback and check each time if it is false or true. But since I'm used to spreading everything into separate classes, with inheritance, etc. As I consider such a variable has no place in any of the classes)

Answer 1

Well, for example, you can use the :animated selector , it gets the elements that are in the process of being animated, and use the is method on the block.
Example on jsfiddle
Code itself:

$('#close_button').click(function() {
  var $block = $('#block');
  // Если блок анимируется, не выполняем обработку события
  if($block.is(':animated')) {
  	return;
  }
  // Красим блок случайным цветом, чтобы продемонстрировать однократный вызов события
  $block.css('background-color', "#"+((1<<24)*Math.random()|0).toString(16));
  // Прячем блок
  $block.hide(5000);
})