๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/javascript, jQuery

- ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹œ๊ฐ„ ์ œ์–ด ํ•จ์ˆ˜ setTimeout(), setInterval(), clearTimeout()

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2019. 8. 4.

๋ชฉ์ฐจ

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹œ๊ฐ„ ์ œ์–ด ํ•จ์ˆ˜ setTimeout(), setInterval(), clearTimeout()

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์ผ์ •ํ•œ ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ๋งˆ๋‹ค ํ˜น์€ ์ผ์ •ํ•œ ์‹œ๊ฐ„์ด ์ง€๋‚œ ๋’ค์— ํŠน์ • ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ฑฐ๋‚˜ ๋™์ž‘์„ ์ทจํ•ด์•ผ ํ•  ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข… ์žˆ๋‹ค.

    ์ด๋Ÿด ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹œ๊ฐ„ ํ•จ์ˆ˜๊ฐ€ ๋ฐ”๋กœ setTimeout()์™€ setInterval()์ด๋‹ค.

    setTimeout(), setInterval()์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰ํ•˜๋Š๋ƒ, ๊ณ„์† ๋ฐ˜๋ณต์ ์œผ๋กœ ์‹คํ–‰ํ•˜๋Š๋ƒ์˜ ์ฐจ์ด๋‹ค.

    <script>
    setInterval(function() {
    	yourFunction(e);
    }, 1000);
    setTimeout(function() {
    	yourFunction(e);
    }, 1000);
    
    </script>

    ์œ„์˜ ๋‘ ์˜ˆ์ œ์ฒ˜๋Ÿผ ๋‹จ ํ•œ๋ฒˆ๋งŒ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด setTimeout์„ ์‚ฌ์šฉํ•˜๊ณ , ์ผ์ •ํ•œ ์‹œ๊ฐ„๊ฐ„๊ฒฉ์œผ๋กœ ๋ฐ˜๋ณต ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด setInterval()์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

    setInterval์—์„œ 1000์ด๋ผ๋Š” ์ˆซ์ž๋Š” ๋ฐ€๋ฆฌ์„ธ์ปจ๋“œ๋กœ ํ•ด๋‹น ์ˆซ์ž์˜ ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ๋งŒํผ ๋ฐ˜๋ณตํ•˜๋„๋ก ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

    ๊ทธ๋Ÿฐ๋ฐ ๋งŒ์ผ ์ง€์†์ ์œผ๋กœ ๋ฐ˜๋ณต๋˜๋Š” ๋™์ž‘์„ ์–ด๋–ค ์กฐ๊ฑด์—์„œ๋Š” ๋” ์ด์ƒ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š๋„๋ก ํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

    ์ด๋Ÿด ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜๋Š” clearinterval()์ด๋‹ค.

    setInterval()๋กœ ์‹œ์ž‘๋œ ๋ฐ˜๋ณต ํƒ€์ด๋จธ๋Š” clearinterval() ํ•จ์ˆ˜๋กœ ์ทจ์†Œ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

    ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ setTimeout() ํ•จ์ˆ˜๋กœ ์‹œํ•œ ํญํƒ„ ํƒ€์ด๋จธ๊ฐ€ ๋™์ž‘ํ•˜๊ณ  ์žˆ์„ ๋•Œ ์ด ๊ฒƒ์„ ์ทจ์†Œํ•˜๋Š” ํ•จ์ˆ˜๋Š”clearTimeout()์ด๋‹ค.

    ์‚ฌ์šฉ์˜ˆ์ œ

    <p id="msg"></p>
    <div id="btn2">
    	<button id="settime">set time</button>
    	<button id="cleartime">clear time</button>
    	<button id="setinterval">setinterval time</button>
    	<button id="clearinterval">clearinterval time</button>
    </div>
    <script>
    	var buttons = document.getElementsByTagName("button");
    	for ( var i = 0; i < buttons.length; i++) {
    		buttons[i].onclick = handleButtonPress;
    	}
    	var timeCheckID;
    	var intervalCheckID;
    	var count = 0;
    	function handleButtonPress(e){
    		if (e.target.id == "settime") {
    			timeCheckID = window.setTimeout(function() {
    			print("Timeout Expired");
    		}, 2000);
    		print("Timeout Set");
    		} else if (e.target.id == "cleartime"){
    			window.clearTimeout(timeCheckID);
    		print("Timeout Cleared");
    		} else if (e.target.id == "setinterval"){
    			intervalCheckID = window.setInterval(function(){
    			print("Interval expired. Counter: " + count++);
    		}, 1000);
    			print("Interval Set");
    		} else if (e.target.id == "clearinterval"){
    			window.clearInterval(intervalCheckID);
    			print("Interval Cleared");
    		}
    	}
    	function print(msg){
    		document.getElementById("msg").innerHTML = msg;
    	}
    </script>

    ์˜ˆ์ œ ํ…Œ์ŠคํŠธ

     

     

    ์˜ค๋Š˜์˜ ์งค๋ฐฉ : ์‡ผํ•‘๋ชฐ ํ”ผํŒ…๋ชจ๋ธ ํ•ซํŒฌ์ธ  ๊ฐ์„ ๋ฏธ

     

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€