다연이네

[days06] setTimeout/setInterval 본문

Web/CSS

[days06] setTimeout/setInterval

　다연　 2020. 12. 16. 13:48
반응형

- 작동하게 하는 함수

setTimeout("실행시킬 함수",시간) : 대기 시간이 지난 후 해당 함수를 한번만 실행시킨다.

setInterval("실행시킬 함수",시간) : 대기 시간이 지난 후 해당 함수를 반복해서 실행시킨다.

 

- 작동을 중지시키는 함수

clearTimeout() : setTimeout을 중지

clearInterval() : setInterval을 중지

 

1버튼을 누르면 아무것도 없던 자리에 날짜와 시간이 뜬다. (1초 단위로 계속 업데이트 됨)

2버튼을 누르면 움직이던 시간이 멈춘다.

 

 1. setTimeout, clearTimeout() 사용 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="demo"></div>
<button onclick="timer_start()">setTimeout</button>
<button onclick="timer_stop()">clearTimeout</button>
<br>

<script>
var demo;
window.onload = function() {
	//alert("생성자처럼 초기화 작업 - window_onload 이벤트 발생");
	window.demo = document.getElementById("demo");
}

var timer;
function dispTime() {
	var now = new Date(); //== Date.now(); 
	demo.innerHTML = now.toLocaleString();
	timer = setTimeout(dispTime , 1000); //setTimeout : 해당 시간 후에 이 함수를 호출하겠다
	//1초 후에 등록된 dispTime 함수를 호출한다. (1초 간격으로 자기자신 호출)
}

function timer_start() {
	dispTime();
}

function timer_stop() {
	clearTimeout(timer);
}
</script>
</body>
</html>

 2. setInterval, clearInterval 사용

+ jQuery로 변경 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="demo"></div>

<button>setInterval()</button>
<button>clearInterval()</button>

<script>

$("document").ready(function() { //
	var timer;
	$("button").first().click(function(event) {
		//alert("버튼1");
		dispTime();
		timer  = setInterval(dispTime, 1000); //setInterval : 1초마다 함수 호출
	});
	$("button").eq(1).click(function(event) { //eq순번 (0,1,...)
		//alert("버튼2");
		clearInterval(timer);
	});
	
	function dispTime() {
		var now = new Date();
		$("#demo").html(now.toLocaleString());
	}
	
});

</script>
</body>
</html>

 

* 버튼 등에 id가 없을 때 어떻게 받아오냐?

$("button").first().click(function(event) {

$("button").eq(1).click(function(event) {

$("button").eq(2).click(function(event) {

$("button").last().click(function(event) {

 

 

 

 

 

 

출력되고 있는 중 ...

해당 버튼 클릭시 내가 작성한 html 코딩 내용이 주루루룩 출력되게 하기 (한 자씩 0.05초 간격으로)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 <button onclick="btn_typeWriter()">TypeWriter</button>
<p id="box"></p> 
<br>

<script>
var timer;
var box = document.getElementById("box");
var content;
var content_length;
var i =0;
function btn_typeWriter() {
	 //DOM (Documet Object Model)
	  //document.documentElement == html 루트엘리먼트
	content = document.documentElement.innerHTML;
	content_length = content.length;

	
	typeWriter();
}

function typeWriter() {
	if(content_length >=i ){
		var oneChar = content.charAt(i++);
		box.innerHTML +=oneChar=="\n"?"<br>":oneChar;
		timer = setTimeout(typeWriter, 50);
		 //재귀 함수 처럼 자기 자신 계속 호출
	}else{
		clearTimeout(timer);
		alert("끝")
	}
} 
</script>
</body>
</html>

기억 ) document.documentElement == html 루트엘리먼트 

 

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days05] CSS 전역변수와 document.querySelector  (0) 2020.12.09
[days05] 툴팁(Tooltip)  (0) 2020.12.09
[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기  (0) 2020.12.09
[days05] CSS 애니메이션  (0) 2020.12.09
[days05] CSS 전환 - transition  (0) 2020.12.09
'Web/CSS' Related Articles more
Comments