안녕하세요. 날씨 API를 통해 받은 weather data와 unsplash에서 제공하는 url을 이용해 background image를 랜덤 변경하는 코드를 짜보고 있습니다.

setInterval로 30초 마다 날씨를 체크하여 bg img에 반영하도록 하고, setInterval 실행 이전에 함수를 한 번 실행하여 대기시간 없이 바로 이미지가 뜰 수 있도록 계획했는데 함수 실행 코드를 적는 순서나 방법을 막론하고 setInterval에 걸어둔 딜레이 시간이 무조건 지나야지만 이미지가 반영되는 이상한 문제를 겪게 됐습니다. unsplash에서 이미지를 가져오는 시간 때문인가 싶어 setInterval의 딜레이 시간을 0으로 맞춰보니 이미지가 대기 없이 거의 바로 뜹니다. 도대체 뭐가 문제일까요. 미욱한 실력으로 하루종일 잡고 있어도 답이 안 나오기에 이렇게 질문 올려봅니다...ㅜㅜ

콘솔을 찍어보니 randomBg(); 내부에 있는 '0'이 출력되는 것을 보아 함수가 실행은 되는데 어디가 문제인지 딜레이 시간은 칼같이 지키네요...😭 고수분들의 도움을 구해봅니다...!

이미지에서는 startInterval 함수를 추가했지만

randomBg();

setInterval(randomBg,30000);

위와 같은 형식으로 작성해도 콘솔만 찍힐 뿐 딜레이 시간이 모두 지나기 전까지 bg img는 뜨지 않습니다.

▼ HTML 코드

· section#main = background image 적용 영역. 본문을 감싸고 있음.

· div#weather span: first-child = 날씨 정보를 받아오는 영역.

▼ CSS 코드

▼ 날씨 API를 통해 정보를 받아와 HTML에 표시하는 JS 코드 (weather.js)

▼ 날씨에 따라 바뀌는 랜덤 백그라운드 이미지 JS 코드 (background.js)

· 웹 로드 시, 콘솔에 '0'과 'else'가 출력되는 것을 보아 randomBg 함수는 제대로 호출되고 있음.

· 처음에만 배경이 출력되지 않고 setInterval을 통해 callback했을 때는 정상적으로 출력됨.