Как выполнить функцию, только если есть задержка?

Question

Я хочу создать полосу загрузки на странице, которая должна отображаться только в том случае, если пользователь ожидает 2 или более секунд по асинхронному запросу c. У меня есть этот код:

loading: function() {
    $(document).on("tdi:ajax:start", function() {
        $('.loader').addClass("loader--show");
    });

    $(document).on("tdi:ajax:end", function() {
        $('.loader').removeClass("loader--show");
    });
},

Но сейчас полоса загрузки мигает на экране всякий раз, когда есть запрос даже 1 мс. Если я устанавливаю тайм-аут на addClass, он просто задерживается, когда появляется панель загрузки, и затем не исчезает, потому что конечное событие сработало за это время. Так или иначе, после того, как стартовое событие сработало, мне нужно измерить, произошло ли конечное событие, и если нет, добавить loaderClass, пока не сработает конечное событие. Есть идеи, как мне этого добиться?

Answer 1

Одним из решений может быть объявление переменной в вашей функции loading, перемещение части addClass в setTimeout в вашей функции события tdi:ajax:start и назначение timeoutId, сгенерированного setTimeout, ранее объявленной переменная. Затем внутри функции события tdi:ajax:end вы можете вызвать clearTimeout в timeoutId перед удалением класса. Это должно предотвратить повторное добавление класса после его удаления.

Answer 2

loading: function() {
    let timeoutId; 
    $(document).on("tdi:ajax:start", function() {
        // This will init the delayed execution
        timeoutId = setTimeout(function() { 
           $('.loader').addClass("loader--show"); 
        }, 2000);
    });

    $(document).on("tdi:ajax:end", function() {
        // This will clear timeout and cancel it execution
        clearTimeout(timeoutId);
        $('.loader').removeClass("loader--show");
    });
},