Запуск таймера внутри события video.addEventListener ('timeupdate', function)

Question

Я создаю кнопки пропуска в определенных частях видео, и я использовал событие timeupdate, чтобы отслеживать текущее время и применить мой ar go (добавить кнопки и удалить их) проблема в том, что для одного кнопок я использую таймер, чтобы он увеличивался для объема цвета на определенное количество времени, а затем исчезал, если не нажимал, но таймер не работает эффективно внутри события "timeupdate" bcs, я думаю, это событие срабатывает между 50 и 250 мс с видео HTML api, пожалуйста, можете ли вы посоветовать мне альтернативу для таймера или способ заставить таймер работать внутри события timeupdate

    // skip UI gestion
video.addEventListener('timeupdate', (event) => {

    if ( (video.currentTime >= dataPlayer.passintrostartime + 1) && video.currentTime < dataPlayer.passintroendtime && passIntroZome > 10 && (dataPlayer.passintroendtime - video.currentTime > 10) ) { 
        console.log(video.currentTime)
        $(".pass-intro").css("display", "block");
    } else {
        $(".pass-intro").css("display", "none");
    }

    if ( (video.currentTime >= dataPlayer.startgenerictime + 4) && video.currentTime < dataPlayer.endgenerictime) {
        console.log(video.currentTime);
        $(".quit-player").css("display", "block");
        $("#player_container .next-episode").css("display", "none");

        // skip auto 
        if(nextEpisodeManuClicked && player) {

            // the timer i'm talking abt

            $(".interstitiel-skip-btns").css("display", "block");
            var countSkipTimeout = 8000;
            var timeoutSkipLine = setInterval(function(){
            countSkipTimeout = countSkipTimeout - 1000;
            var widthSkipTimeout = (countSkipTimeout * 100) / 8000;
            $("#close_interstitiel_skip_button .timeout-skip-overlay").css('width', widthSkipTimeout + '%');
        }, 1000);
        /**/
        gInfoTimeOut = setTimeout(function(){
            clearInterval(timeoutSkipLine );
            $("#interstitiel-skip-btns").remove();
            $('#info_container').css('display', 'none');
            $("#interstitiel-skip-btns").remove();
        }, 8000);
            $(".skip-next-episode").css("display", "none");
            console.log("we are in session");

        } else {
            $(".skip-next-episode").css("display", "block");
            $(".interstitiel-skip-btns").css("display", "none");
            console.log("not in session lecture");
        }

    } else { 
        $(".quit-player").css("display", "none");
        $(".skip-next-episode").css("display", "none");
        $("#player_container .next-episode").css("display", "block");
        $(".interstitiel-skip-btns").css("display", "none");
    }   

})

, и это часть HTML (handelbars. js)

    <div class="pass-intro">Passer l'intro</div>
    <div class="quit-player">s'arrêter la</div>
    <!-- {{#if dataPlayer.summary.menutitle}} -->
    <div class="skip-next-episode {{#unless dataPlayer.nextEpisode.id}}off{{/unless}}" data-videoid="{{dataPlayer.nextEpisode.id}}">épisode suivant</div>
    <!-- {{/if}} -->
        <div class="interstitiel-skip-btns">
            <!-- {{#if detaillink}} -->
            <a href="#" class=".info_skip_interstitiel_button" data-videoid="{{dataPlayer.nextEpisode.id}}">
                épisode prochaine 
            </a>
            <!-- {{/if}} -->
            <div id="close_interstitiel_skip_button">
                Passer
                <span class="timeout-skip-bg"></span>
                <span class="timeout-skip-overlay"></span>
            </div>
        </div>