상세 컨텐츠

본문 제목

애니메이션

♥ 코딩(Coding)/자바스크립트(JavaScript)

by 디자이너 윈썸 2022. 6. 20. 20:23

본문

-  일정시간이 흐른 후 미리 약속된 작업을 한 번 수행하는 setTimeout()괴 동일한 시간 간격으로 약속된 작업을 반복해서 수행하는 setInterval()로 애니메이션을 구성

 

배열 항목 구분 설명
타이밍 이벤트 - 설정된 시간이 지난 후에 약속된 코드 모둠이 실행되도록 구성한 형식
setTimeout() setTimeout(함수, 시간) 1/1000초 단위인 밀리초(ms)로 설정된 시간이 지난 후에 함수 형식의 코드를 한 번 수행
setInterval() setInterval(함수, 시간) 1/1000초 단위인 밀리초(ms)로 설정된 시간 간견마다 함수 형식의 코드를 반복적으로 수행

 

- window.setTimeout(함수, 시간)으로 표현할 수 있으나, 최상위 객체인 window는 생략하고 사용할 수 있다

window.setIntercal(함수, 시간)도 동일

-  window.setTimeout( function() {수행코드},1000)은 1초 후에 코드를 실행하도록 함

-  setTimeout(함수이름,1000)은 1초 후에 '함수이름'으로 정의된 함수를 호출하여 실행하도록 함

 

** 콜백함수 : 자바스크립트는 코드를 한 줄씩 바로 해석하여 실행하는 구조

하지만 콜백 함수는 특정한 상황에서 미리 만든 함수를 실행하도록 만든 형식

여기에서는 id가 box인 영역을 클릭했을 때 실행하도록 만들었음

**  'this'는 자바스크립트에서 중요한 키워드로 우리말의 '나는'처럼 대명사로 사용

누가 사용하느냐에 따라 '나는'은 다른 것을 가리킬 수 있으며, 중복된 단어를 짧게 줄여 쓸 수 있음

 

**  clearTimeout()은  setTimeout()을 무효화하는 메소드이지만, clearInterval()에 비해 사용 빈도가 낮습니다

 

'♥ 코딩(Coding) > 자바스크립트(JavaScript)' 카테고리의 다른 글

객체  (0) 2022.06.22
사용자 입력 폼  (0) 2022.06.22
히스토리(history) 객체  (0) 2022.06.13
브라우저 객체 모델(BOM)  (0) 2022.06.13
문서 객체 모델(DOM)  (0) 2022.06.13

관련글 더보기