setInterval 지연 없이 실행(즉시 실행)

나란히 3개로 있는 배너가 5초마다 순서대로 활성화되어야 하는 상황인데, setInterval을 사용하니 첫 시작에 지연이되어 원하는것보다 늦게 실행되어서 찾아보게되었다.

지연-콜백-지연-콜백으로 반복되었던 코드

let isPaused = false;
const loop = function () {
  if(!isPaused) {
    $('#main .links .link1').addClass('active').siblings().removeClass('active');

    setTimeout(function () {
      $('#main .links .link2').addClass('active').siblings().removeClass('active');
    }, 5000);

    setTimeout(function () {
      $('#main .links .link3').addClass('active').siblings().removeClass('active');
    }, 10000);
  }
};	

setInterval(loop, 15000);

$('#main .links').hover(function () {
  isPaused = true;
}, function () {
  isPaused = false;
});

스택오버플로우에서 본 코드

(function() {
    function doSomething() {
        console.log("tick");
    }
    doSomething();
    setInterval(doSomething, 9000);
})();

해결

전체를 즉시 실행 함수로 감싸고 setInterval을 실행하기 전에 loop함수를 실행시킨다.
그러면 사이클이 한번 돌고-지연된다음-사이클이 반복된다.
그래서 setInterval이 지연없이 실행되는 것처럼 된다.

(function () {
  let isPaused = false;
  const loop = function () {
    if(!isPaused) {
      $('#main .links .link1').addClass('active').siblings().removeClass('active');

      setTimeout(function () {
        $('#main .links .link2').addClass('active').siblings().removeClass('active');
      }, 5000);

      setTimeout(function () {
        $('#main .links .link3').addClass('active').siblings().removeClass('active');
      }, 10000);
    }
  };
  
  loop();
  setInterval(loop, 15000);

  $('#main .links').hover(function () {
    isPaused = true;
  }, function () {
    isPaused = false;
  });
  
})();

도움받은 글: https://stackoverflow.com/questions/10563344/how-to-start-setinterval-loop-immediately