1-1 [JavaScript ] 타이머 함수(setTimeout, setInterval)

오늘 할 일 (계획)

1. DB 추가 구성 - 랜덤 카드 칼럼 출력에 사용

 

2. 비밀번호 변경 페이지 구성하기

 

3. 화면 변화 카드컬럼 구현

 

4. 웹 프로젝트 3 마무리 - 지연중

 

5. 파이썬 알고리즘 강의 2주 차 완료하기 - 지연중

 

6. Git 기초강의 3주 차까지 완강 - 지연중

 

오늘 한 일 (회고)

1. DB 구성 및 Robo 3T 사용법 동기들에게 가르쳐줌

 

2. 검색기능 완벽하게 구현

- 게시물 숫자 

- 검색어 바로 업데이트 

 

3. 로그인, 회원가입 페이지 내부 타이머를 이용하여 사진 전환 및 fadein out 기능 구현

- settimeout cleartimeout setInterval 

함수 이름	설명
setTimeout(함수, 시간)	일정 시간 후 함수 실행
setInterval(함수, 시간)	일정 시간 간격으로 함수 반복 실행
clearTimeout(id)	실행되고 있는 timeout 을 중지
clearInterval(id)	실행되고 있는 interval 을 중지

// let start_fun;
let op_count = 0;
let settime_func;
let settime1_func;

// window.onload = function () {
//     start_fun = setTimeout(fade_in, 100)
// }


function fade_in() {
    op_count = op_count + 0.1;

    insta_pic_log.style.opacity = op_count;
    settime_func = setTimeout(fade_in, 100);
    if (op_count > 1) {
        clearTimeout(settime_func);
        settime1_func = setTimeout(fade_out, 3000);
        op_count = 1;
    }
}

function fade_out() {
    op_count = op_count - 0.1;

    insta_pic_log.style.opacity = op_count;
    settime_func = setTimeout(fade_out, 130);
    if (op_count <= 0) {
        clearTimeout(settime_func);
        op_count = 0;
    }

}

let image = document.getElementById('insta_pic_log');
let images = ['https://i.imgur.com/1Xhkl8U.png',
    'https://i.imgur.com/ON3EtBB.png',
    'https://i.imgur.com/XLexKSD.png',
    'https://i.imgur.com/eAuckQu.png']
setInterval(function () {
    // fade_out()
    fade_in()
    let random = Math.floor(Math.random() * 4);
    image.src = images[random];
    op_count = 0;
}, 6000) // 기존 200차이났었음

변하는 시간에 따라서 insta_pic_log 의 opacity를 조절하여 구현

내일 할 일

1. DB 추가 구성 - 랜덤 카드 칼럼 출력에 사용

 

2. 비밀번호 변경 페이지 구성하기

 

3. 웹 프로젝트 3 마무리 - 지연중

 

4. 파이썬 알고리즘 강의 2주 차 완료하기 - 지연중

 

5. Git 기초강의 3주 차까지 완강 - 지연중

 

 

-- 너무 집중하여 TIL을 쓰지 않고 새벽을 맞이해버렸다 ..