Выполнение функции только если в это время не выполняется вторая функция js

Прошу подсказать, как можно реализовать такой функционал:

  • Имеются две функции (f1 и f2, условно). Обе вызывается кликом по кнопке.

  • Функция f2 выполняется с некой задержкой (запрос).

  • Функция f1 выполняется в независимости от того, была ли предварительно вызвана f2, но если была, то функция f1 должна быть выполнена только по окончании выполнения f2 (запроса). То есть, мне всего лишь нужно исключить вариант, когда функция f2 была уже вызвана, но не окончила работу (не успел прийти ответ на запрос) и при этом тут же была вызвана функция f1. То есть, f1 можно вызвать в любое время, кроме того, когда запрос УЖЕ послался, но ответ на запрос ЕЩЁ не получен.

     var y = 'ещё нет';
    
     $('#btn').click(function(){
         f1();
     });
    
     $('#btn2').click(function(){
         f2();
     });
    
     function f1(){
         alert (y);
     }
    
     function f2() {
         setTimeout(f3, 5000);
     };
    
     function f3(){
         y = 'уже да';
     };
    

Код для примера. Колбэки, промисы, await - не могу сообразить, как их применить, с учётом, что f1 должна выполняться не только ПОСЛЕ выполнения f2, но и ДО (исключить нужно только "во время").


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

Автор решения: vsemozhebuty

Можно попробовать так (только, наверное, на время работы функций их кнопки стоит делать неактивными):

let y = 'ещё нет';

let f2IsBusy = false;

$('#btn').click(function(){
  f1();
});

$('#btn2').click(function(){
  f2IsBusy = f2();
});

async function f1(){
  await f2IsBusy;
  alert(y);
}

async function f2() {
  await new Promise(resolve => setTimeout(resolve, 5000));
  y = 'уже да';
  f2IsBusy = false;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn">f1</button>
<button id="btn2">f2</button>

→ Ссылка