JavaScript는 서버 측 프로그래밍 언어뿐만 아니라 클라이언트 측 프로그래밍 언어로도 사용됩니다. 그것여러 기능을 쉽게 수행 할 수 있도록 다양한 방법을 제공합니다. 이것이 만든 것입니다 가장 널리 사용되는 프로그래밍 언어 중 하나이며 여러 종류의 제품 개발에서 널리 사용되고 있습니다.JavaScript의 SetInterval은 JavaScript의 타이밍 이벤트의 일부이며 다음 순서로 학습합니다.
파이썬의 형식은 무엇입니까
타이밍 이벤트
JavaScript는 또한 기능 뿐만 아니라 프로그램의 실행 시간이 아닌 시간에 관한 방법. 이를 통해 프로그램 실행 시간에 관계없이 지정된 시간에 기능을 실행할 수 있습니다.
JavaScript에서 타이밍 이벤트를 사용하는 두 가지 주요 방법은 다음과 같습니다.
setTimeout (함수, 밀리 초)
이 함수는 지정된 시간 (밀리 초) 이후 한 번만 매개 변수로 전달되는 내부 함수를 실행합니다.
setInterval (함수, 밀리 초)
이 함수는 실행 시간부터 모든 시간 간격에 도달 한 후 함수를 실행합니다. 매 시간 간격으로 기능 실행을 반복합니다.
이제 JavaScript의 SetInterval이 어떻게 작동하는지 살펴 보겠습니다.
JavaScript의 SetInterval
이 함수의 첫 번째 매개 변수는 실행할 함수이고 두 번째 매개 변수는 각 실행 사이의 시간 간격을 나타냅니다.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ( 'demo'). innerHTML = d.toLocaleTimeString ()}여기서 document.getElementById는 id는 'demo'이고 d.toLocaleTimeString () 함수는 시스템의 현재 시간을 제공합니다.
따라서 이것은 1 초에 해당하는 1000 밀리 초마다 반복됩니다. 따라서이 함수는 1 초마다 반복적으로 실행되므로 시간은 1 초마다 업데이트됩니다.
그렇다면이 실행을 어떻게 중지할까요? 알아 보자!
실행을 중지하는 방법?
clearInterval ()이라는 다른 함수를 사용하여 setInterval () 함수에서 실행을 중지 할 수 있습니다.clearInterval ()은 setInterval () 함수에서 반환 된 변수를 사용합니다.
예를 들면 :
myVar = setInterval (함수, 밀리 초) clearInterval (myVar)
다음은 setInterval ()과 clearInterval ()을 모두 사용하는 예제입니다. 이것은 시계를 시작하고 시간을 중지하는 버튼을 제공합니다.
아래는 시계입니다.
중지 시간
시간을 중지하려면 위의 버튼을 클릭하십시오.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ( 'demo'). innerHTML = d.toLocaleTimeString ()}
산출:
setInterval () 및 clearInterval ()에 대한 몇 가지 추가 예제.
반복 피보나치 C ++
동적 진행률 표시 줄 만들기
#myProgress {너비 : 100 % 높이 : 30px 위치 : 상대 배경색 : #ddd} #myBar {배경색 : # 4CAF50 너비 : 10px 높이 : 30px 위치 : 절대}
나를 클릭 함 function move () {var elem = document.getElementById ( 'myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}산출:
초기 출력
'Click Me'버튼을 클릭하면 출력됩니다.
두 배경 간 전환
토글 중지 var myVar = setInterval (setColor, 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'pink': 'yellow'} function stopColor () {clearInterval (myVar)}산출:
자바 스크립트에 비해 jquery의 장점
색상은 노란색과 분홍색 사이에서 전환됩니다. 위의 출력은 버튼을 클릭하기 전이고 아래는 버튼을 클릭 한 후입니다.
이것으로 우리는 JavaScript의 SetInterval 기사를 마쳤습니다. SetInterval 메서드가 어떻게 작동하는지 이해 하셨기를 바랍니다.
확인 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.
질문이 있으십니까? 이 블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.