Как убрать задержку перед запуском функции (SetInterval)

Question

Как убрать задержку перед первым выполнением функции? Само тело функции у меня длится 9 секунд. Но нужно чтобы эта функция запускалась не через 9 секунд, а 3 секунды. (внизу 9000 нельзя менять т.к это время выполнения тела функции). Заранее спасибо!

Смысл кода: баннеры которые меняются бесконечно с определнным интервалом

const regBanner = document.querySelector('.banner-reg');
const tourBanner = document.querySelector('.banner-tour');

 let changeBanners = setInterval(() => {
    let changeBannerReg = setInterval(() => {
        regBanner.style.display = 'none';
        tourBanner.style.display = 'flex';
        },3000);
        setTimeout(() => {clearInterval(changeBannerReg)}, 3000);
        
        let changeBannerTour = setInterval(() =>{
        regBanner.style.display = 'flex';
        tourBanner.style.display = 'none';
        },6000);
        setTimeout(() => {clearInterval(changeBannerTour)}, 6000);
},9000)

Answer 1

Если нужно каждые 3 секунды показывать по очереди два баннера, то можно это сделать в одном setInterval:

const regBanner = document.querySelector('.banner-reg');
const tourBanner = document.querySelector('.banner-tour');

let showRegBanner = true;

setInterval(() => {
  regBanner.style.display = showRegBanner ? 'flex' : 'none';
  tourBanner.style.display = showRegBanner ? 'none' : 'flex';
  
  showRegBanner = !showRegBanner;
}, 3000);

.banner-reg,
.banner-tour {
  width: 50px;
  height: 50px;
  border: 1px solid;
  display: none;
}

.banner-reg {
  background-color: red;
}

.banner-tour {
  background-color: blue;
}

<div class="banner-reg"></div>
<div class="banner-tour"></div>

Но тут сначала первые 3 секунды ничего не показывается, если нужно, чтобы сначала был виден баннер сразу, то надо просто добавить в стилях изначально display: flex:

const regBanner = document.querySelector('.banner-reg');
const tourBanner = document.querySelector('.banner-tour');

let showRegBanner = true;

setInterval(() => {
  regBanner.style.display = showRegBanner ? 'flex' : 'none';
  tourBanner.style.display = showRegBanner ? 'none' : 'flex';
  
  showRegBanner = !showRegBanner;
}, 3000);

.banner-reg,
.banner-tour {
  width: 50px;
  height: 50px;
  border: 1px solid;
  display: none;
}

.banner-reg {
  background-color: red;
}

.banner-tour {
  background-color: blue;
  display: flex;
}

<div class="banner-reg"></div>
<div class="banner-tour"></div>

Answer 2

Написал такой вариант, который больше по смыслу подходит под описание вопроса.

Блок REG отображается 3 секунды, после чего скрывается и отображается блок TOUR на 6 секунд, и вот это всё действие уже зациклено.

const regBanner = document.querySelector('.banner-reg');
const tourBanner = document.querySelector('.banner-tour');

const ToggleBlock = () => {
  regBanner.style.display = 'flex';
  tourBanner.style.display = 'none';
  
  setTimeout(() => {
    regBanner.style.display = 'none';
    tourBanner.style.display = 'flex';
  }, 3000);
};

ToggleBlock();
setInterval(ToggleBlock, 9000);

.banner-reg,
.banner-tour {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  font-family: sans-serif;
  font-size: 24px;
  text-align: center;
}

.banner-reg {background-color: red;}
.banner-tour {display: none; background-color: blue; color: #fff;}

<div class="banner-reg">REG<br>3s</div>
<div class="banner-tour">TOUR<br>6s</div>

БЛОГ НА HUSL

Как убрать задержку перед запуском функции (SetInterval)

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