SetInterval, SetTimeout

기억을 위한 나만의 기록장!!

안녕하세요! 오늘은 setInterval, Settimeout을 사용하여 이미지를 보여주는 작업을 진행해보려고 합니다!!
이야기에 들어가기 전에 밑에서 이미지로 보시면 아시겠지만 저희가 전부터 만들었던 데이터 값들인 cid가 나오시는걸 확인하실 수 있으실겁니다. 그건 서버쪽이랑 엮어서 파이썬 사용해서 mongoDB에서 find하여 가지고 오는 상황입니다!

SetInterVal 🧐

• 일정한 시간 간격으로 작업을 수행하기 위해서 사용
• clearInterval 함수를 사용하여 중지 가능

이미지는 "개발자 아저씨들 힘을 모아" 블로그에서 참고하였습니다!

SetTimeout 🧐

• 일정한 시간 후에 작업을 한번 실행
• 보통 재귀적 호출을 사용하여 작업을 반복

  재귀적 호출이란,
  재귀 호출(recursive call)이란 함수 내부에서 함수가 자기 자신을 또다시 호출하는 행위를 의미합니다. 이러한 재귀 호출은 자기가 자신을 계속해서 호출하므로, 끝없이 반복되게 됩니다.

• 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식
• clearTimeout() 을 사용해서 작업 중지 가능

이미지는 "튜나 개발일기" 블로그에서 참고하였습니다!

이미지 5초 기준으로 바꾸기 😉

소스를 만들기 위해서 참고한 사이트는,

- https://aspdotnet.tistory.com/2521

- https://blog.naver.com/PostView.nhn?blogId=classe82&logNo=221591130492&categoryNo=0&parentCategoryNo=0&viewDate=¤tPage=1&postListTopCurrentPage=1&from=postView

Template.해당 template 이름.onCreated(() => {
    var imgs = [ 'thumbnail_test2.jpg', 
                'thumbnail_test3.jpg',
                'thumbnail_test4.jpg',
                'thumbnail_test5.jpg',
                'thumbnail_test6.jpg' ];
    Session.set('URLImgs', imgs);
    console.log(imgs);
});

Template.해당 template 이름.helpers({
    imgsURL() {
        let imgs = Session.get('URLImgs');
        let i = 0;
        let imgtime = '';
        let imgClass = '';
        function imgFnc() {
            i++;
            imgtime = imgs[i-1];
            console.log(imgs[i-1]);
            imgClass = document.getElementsByClassName('monito-img');
            for(let i2 = 0; i2 < imgClass.length; i2++) {
                imgClass[i2].src = imgtime;
            }
        }
        setTimeout(() => {
            while ( i < 1 ){
            imgFnc();
            break;
            }
        }, 0);
        function imgtimes() {
            if ( i >= imgs.length ) {
                i = 0;
            }
            while ( i < imgs.length ){
                imgFnc();
                break;
            }
        }
        setInterval(imgtimes, 5000);
    }

확인샷 ✔

이런식으로 5초를 기준으로 이미지가 돌아가고 있습니다~~

+ 랜덤으로 이미지 변경하기 😅

랜덤으로 불러오기 위해서 사용한

• Math.floor()는, 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환하는 함수입니다.
• Math.random()는, 0 이상 1 미만의 구간에서 근사적으로 균일한 부동소숫점 의사난수를 반환합니다.

  의사난수란,
  컴퓨터 알고리즘으로 만들어 내는 무작위로 추출된 수(난수)라고 합니다.

imgsURL() {
        let imgs = Session.get('URLImgs');
        let i = 0;
        let imgtime = '';
        let imgClass = '';
        function imgFnc() {
            i++;
            imgtime = imgs[i-1];
            console.log(imgs[i-1]);
            imgClass = document.getElementsByClassName('monito-img');
            for(let i2 = 0; i2 < imgClass.length; i2++) {
                let rand_idx= Math.floor(Math.random() * imgs.length);
                imgtime = imgs[rand_idx];
                imgClass[i2].src = imgtime;
            }
        }
        setTimeout(() => {
            while ( i < 1 ){
            imgFnc();
            break;
            }
        }, 0);
        function imgtimes() {
            if ( i >= imgs.length ) {
                i = 0;
            }
            while ( i < imgs.length ){
                imgFnc();
                break;
            }
        }
        setInterval(imgtimes, 5000);
    }

확인샷 ✔