JavaScript는 사전 정의된 “ 클리어타임아웃 ()” 시간 초과 기능을 관리하는 메서드입니다. 이를 통해 사용자는 '에 의해 이전에 설정된 시간 간격을 취소할 수 있습니다. setTimeout ()' 기능. 특정 시간 간격 이후에 반복되는 코드 블록의 실행을 중지합니다. 주로 은행 및 전자상거래 웹사이트에서 예약된 작업을 취소하는 데 사용됩니다.
이번 포스팅에서는 자바스크립트의 clearTimeout() 함수를 처리하는 방법을 설명하겠습니다.
JavaScript 'clearTimeout()' 기능을 처리하는 방법은 무엇입니까?
“ 클리어타임아웃 ()” 기능은 “를 사용하여 이전에 설정한 시간 간격을 취소합니다. setTimeout ()' 기능. “ setTimeout ()” 함수는 그 안에서 특정 작업을 반복적으로 수행하는 시간 간격을 설정합니다.
통사론
“의 작업 클리어타임아웃 ()” 메서드는 아래에 작성된 기본 구문에 따라 달라집니다.
클리어타임아웃 ( id_of_settimeout )
위의 구문에 따르면, “ 클리어타임아웃 ()”는 “를 취합니다. ID '의' setTimeout ()” 기능을 수행하고 시간 간격을 중지합니다. 사용자가 ID를 전달하지 않으면 아무 작업도 수행되지 않습니다.
위에서 정의한 함수를 기본 구문을 사용하여 구현해 보겠습니다.
예제 1: 설정된 시간 간격을 중지하기 위해 'clearTimeout()' 함수 적용
첫 번째 예에서는 “ 클리어타임아웃 ()” 기능을 사용하여 설정된 시간 간격을 중지합니다.
먼저 다음 HTML 코드를 살펴보세요.
< 센터 >< 피 > 2초 정도 기다리면 페이지에 제목이 표시됩니다. < / 피 >
< h2 ID = 'H2' >< / h2 >
< 단추 클릭하면 = '멈추다()' > 처형을 중단하라! < / 단추 >
< / 센터 >
위의 코드 줄에서:
- “< 센터 >” 태그는 주어진 HTML 요소의 정렬을 웹 페이지의 중앙으로 설정합니다.
- “< 피 >” 태그는 단락 문을 지정합니다.
- “< h2 >' 태그는 ID가 '인 빈 제목 요소입니다. H2 '.
- “< 단추 >' 태그는 '를 호출하는 버튼 요소를 삽입합니다. 멈추다 ()”가 붙어 있을 때의 기능 “ 클릭하면 ' 이벤트가 발생합니다.
다음으로 “ 클리어타임아웃 ()” 함수는 명시된 코드 블록을 사용합니다.
< 스크립트 >const 세트타임 = setTimeout ( 시작 , 2000 ) ;
기능 시작 ( ) {
문서. getElementById ( 'H2' ) . 내부HTML = '리눅스힌트에 오신 것을 환영합니다!'
}
기능 멈추다 ( ) {
클리어타임아웃 ( 세트타임 ) ;
}
스크립트 >
위의 코드 조각에서:
- “ 세트타임 ” 변수는 “ setTimeout ()” 함수는 “를 전달합니다. 시작 ” 함수를 첫 번째 매개변수로 사용하고 지정된 “ 밀리초 단위 ”를 두 번째 매개변수로 사용합니다. 이 함수는 “ 시작 ”는 지정된 시간 간격으로 작동합니다.
- 다음으로 “ 시작 ()' 기능.
- 이 함수에서는 “ document.getElementById ()' 메소드는 ID가 '인 빈 제목 요소에 액세스하기 위해 적용됩니다. H2 ”를 입력하고 주어진 텍스트 문을 추가합니다.
- 그 후, “ 멈추다 ()” 함수가 정의되어 있습니다. 클리어타임아웃 ()' 메소드는 '의 ID를 전달합니다. setTimeout ()” 기능을 사용하여 시간 간격을 중지합니다.
출력(실행 정지 전)
이제 출력에는 '를 통해 설정된 시간 간격을 중지하기 전에 지정된 시간 간격의 제목 요소가 표시됩니다. setTimeout ()' 방법.
출력(실행 중지 후)
버튼을 클릭하면 제목 요소를 표시하기 위해 설정된 시간 간격이 중지됩니다.
예제 2: “clearTimeout()” 함수를 적용하여 함수 중지
이 예에서는 “ 클리어타임아웃 ()” 함수를 사용하여 함수 실행을 중지합니다.
먼저 제공된 HTML 코드를 살펴보세요.
< 센터 >< 단추 클릭하면 = '시작()' > 카운트 시작! < / 단추 >
< 입력 유형 = '텍스트' ID = '필드' >
< 단추 클릭하면 = '멈추다()' > 카운트를 중지하세요! < / 단추 >
< / 센터 >
위의 코드 블록에서:
- “< 단추 >” 태그는 “ 클릭하면 ” 이벤트를 클릭하면 “start()” 함수가 호출됩니다.
- “< 입력 >' 태그는 ' 유형의 입력 필드를 추가합니다. 텍스트 ” 및 ID “필드”.
- 다음 “< 단추 >”에는 “ 클릭하면 ” 이벤트를 사용하여 “ 멈추다 ()” 함수는 이 이벤트가 발생하면 발생합니다.
이제 '를 적용해 보세요. 클리어타임아웃 ()” 함수는 다음 코드 라인을 사용합니다:
< 스크립트 >카운터를 보자 = 0 ;
시간을 설정하자 ;
타이머를 켜도록 놔두세요 = 0 ;
기능 세다 ( ) {
문서. getElementById ( '필드' ) . 값 = 카운터 ;
카운터 ++;
세트타임 = setTimeout ( 세다 , 1000 ) ;
}
기능 시작 ( ) {
만약에 ( ! 타이머 켜기 ) {
타이머 켜기 = 1 ;
세다 ( ) ;
}
}
기능 멈추다 ( ) {
클리어타임아웃 ( 세트타임 ) ;
타이머 켜기 = 0 ;
}
스크립트 >
위의 코드 줄에서:
- 첫째, “ 허락하다 ” 키워드는 세 개의 변수를 선언합니다. “ 카운터”, “setTime”, “timer_on” '.
- 다음으로는 “ 세다 ()” 함수가 정의됩니다.
- 그 정의에서는 “ document.getElementById() ” 메소드는 해당 ID를 사용하여 추가된 입력 필드에 액세스하기 위해 적용됩니다. 필드 ”를 입력하고 “의 값을 추가합니다. 카운터 ” 변수입니다.
- 이제 '의 값을 증가시킵니다. 카운터 ” 변수입니다.
- 마지막으로 “ setTimeout ()' 메소드를 사용하여 '의 실행을 수행합니다. 세다 ()” 기능을 특정 시간 간격으로 수행합니다.
- 그런 다음 '라는 이름의 함수를 정의합니다. 시작 ()”.
- 이 함수에서는 “ 만약에 ” 문은 조건을 지정하는 데 사용됩니다. 즉, “ imer_on ' 아니다 ' ~에 ' 그러면 '와 같습니다. 1 ' 그리고 ' 세다 ()” 함수가 호출됩니다.
- 이제 “라는 또 다른 함수가 정의됩니다. 멈추다 ()”.
- 그 정의에서는 “ 클리어타임아웃 ()' 메소드는 '의 id를 전달하여 적용됩니다. setTimeout ()” 방법, 즉 “ 세트타임 '.
산출
'라는 것을 알 수 있다. 시작 횟수 ” 버튼을 누르면 1초마다 증가하는 카운트가 시작됩니다. '를 클릭하면 이 카운트가 중지됩니다. 카운트를 중지하세요! '버튼.
이것이 JavaScript에서clearTimeout() 함수를 처리하는 것에 관한 것입니다.
결론
“ 클리어타임아웃 ()' 함수는 ''를 사용하여 지정된 시간 간격을 처리합니다. setTimeout ()' 기능. ID를 전달하여 이 작업을 수행합니다. '세트타임아웃()' 필수 매개변수로 기능합니다. '를 사용하여 설정된 특정 시간 간격에 수행된 작업을 취소하는 데 사용됩니다. setTimeout ()' 기능. 이번 포스팅에서는 JavaScript의clearTimeout()함수를 처리하는 과정을 실질적으로 설명하였습니다.