Как setTimeout () и setInterval () могут влиять друг на друга?

Question

Я пишу свой первый веб-сайт, где цель пользователя - выбрать объект с самым быстрым ударов в минуту (ритм). Есть 2 больших объекта с 2 разными битами в минуту, каждый из которых активируется при наведении на него курсора (я использую прослушиватель событий с наведением мыши).

Я решил сделать задержку между «переключением ритма», потому что когда пользователь быстро перемещает курсор от одного объекта к другому, немедленно начинает воспроизводиться следующий ритм, и он чувствует себя некомфортно.

Но с кодом ниже вся система воспроизведения ритма прерывается, и ритм начинает воспроизводиться, даже если курсор не зависает над объектом (это происходит, если вы быстро перемещаете курсор назад и назад по объекту несколько раз). Очистка интервала таймера, используемого для воспроизведения ритма, не помогает.

Если закомментированная часть не закомментирована, а часть «если» закомментирована, то все работает нормально, но я не получаю задержку.

t0 - это время, измеренное, когда происходит событие mouseout. play_bpm1 - это функция, выполняемая для события mouseover для первого объекта. Есть та же функция для второго объекта. pla () используется для немедленного воспроизведения одного удара, play (bpm) - это функция, использующая pla () с setInterval, поэтому, когда исполняемый ритм начинает воспроизводиться. rtimer - это таймер, который используется в игре (ударов в минуту) с setInterval.

var play_bpm1 = function(){ 
    if(performance.now()-t0 <= (60000/bpm2)){ //delay between rhythm switching
        rdelay1 = setTimeout(function(){
            clearInterval(rtimer);
            pla();
            play_rt(bpm1);
        }, (60000/bpm2)-(performance.now()-t0) )    
    }
    else{
        clearInterval(rtimer);
        pla();
        play_rt(bpm1);
    }

    // pla();
    // play_rt(bpm1);
}