Как запретить нажимать на блок (картинку) если происходит анимация?

    $("#block_log").click(function(){
    
    //--------------animate----------------------
    if(line1){
        $('#line1').css({
            'width': '0%',
        });
        
        $('#line1').animate({ width:"100%"}, 3000).animate({ width:"0%"});
    }else{
        
    };
    
    //---------------add-one--------------------
    function line1(){
        
        log++;
        $('#log_text').text(log);
    };
    
    setTimeout(line1, 3010);
    
    
});

Ответы (1 шт):

Автор решения: Pavel Grishaev

let log = 1;
let canClick = true; // Можно ли нажимать

$("#block_log").click(function(){
    
    // Если запрещено нажимать, то просто прерываем выполнение функции
    if( !canClick ) return;
    
    console.log(`нажато`);
    
    //--------------animate----------------------
    if(line1){
        $('#line1').css({
            'width': '0%',
        });
        
        canClick = false; // Запрещаем нажатия
        $('#line1').animate({ width:"100%"}, 3000).animate({ width:"0%"}, ()=>{
            // В конце анимации сработает эта функция и разрешаем нажатия
            canClick = true;
        });
    }else{
        
    };
    
    //---------------add-one--------------------
    function line1(){
        
        log++;
        $('#log_text').text(log);
    };
    
    setTimeout(line1, 3010);
    
    
});
#block_log, #line1 {
  box-sizing: border-box;
  padding: 20px;
  background-color: gray;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block_log">block_log (нажимать тут)</div>
<div id="line1">line1</div>

Прочие переменные создал только для того, чтобы пример заработал в отсутствии таковых переменных в коде вопроса.

→ Ссылка