메뉴 보이기
Profile
이온디

2016.06.10

고급팁

Javascript 비동기 프로그래밍

조회 수 103 추천 수 0

작성자 : 이상건 (NHN 엔터테인먼트 / 회원개발팀 / kdsr2z0@gmail.com )


Javascript 의 특성

  • javascript는 script 언어이므로 인터프리터(interpreter) 에 의해 실행된다.
  • 객체 기반의 언어이다.
  • 단일 쓰레드에 의해 실행된다.

자바스크립트는 빠르고 쉽게 배워서 사용할 수 있다.

쉬운 언어이기 때문에 그만큼 많이 사용되지만, 조심해야할 부분을 쉽게 놓칠 수 있다.

또, 생각보다 다양한 방식으로 javascript를 프로그래밍 할 수 있다.

Javascript의 비동기 프로그래밍

동기 프로그래밍이란, 어떤 작업을 요청한 후 그 작업이 완료되기까지 기다렸다가, 응답을 받아 처리하는 것을 말한다.

반면 비동기 프로그래밍이란, 어떤 작업을 요청한 후 다른 작업을 수행하다가 interrupt 등을 이용하여 작업 완료를 알리면 그에대한 응답을 받아 처리하는 것을 말한다.

Javascript는 단일 쓰레드 기반이기때문에 비동기 프로그래밍을 하기가 어렵다. 더군다나 javascript는 별도의 사용자 정의 interrupt function을 지원하지 않고 있다.

그러나 Javascript에서도 비동기 프로그래밍을 할 수 있다. 정확하게는 비동기 프로그래밍 처럼 동작하게 만들 수 있는 것이다.

그 방법은 timer를 활용하는 방법이다.

javascript의 timer

  • setTimeout : 단 한번 실행 된다.

    setTimeout(function(){ alert("Hello"); }, 3000);
    
  • setInterval : 지정된 시간마다 실행된다.

    setInterval(function(){ alert("Hello"); }, 3000);
    
  • clearTimeout : 타이머를 제거한다.

    function myFunction() {
        myVar = setTimeout(function(){ alert("Hello"); }, 3000);
    }
    
    function myStopFunction() {
        clearTimeout(myVar);
    }
    

timer를 이용한 비동기 프로그래밍

단일 쓰레드에의해 실행되는 비동기 프로그래밍은 단순하다.

setInterval 을 이용하여 주기적으로 callback 함수를 호출하여 timeCount 를 증가 시키면서 특정 timeCount에 도달했을때, event를 발생(function 호출) 시키는 것이다.

    <!DOCTYPE html>
    <html>
    <body>

    <button onclick="myFunction()">Try it</button>

    <script>
    var timeCount = 1;
    function myFunction() {
        setInterval(function(){ 
            timeCount++;
            if(timeCount%10==0) {
                alert("Hello"); 
            }
        }, 1000);
    }
    </script>

    </body>
    </html>

위 예제 코드에 보면, 버튼을 클릭할 때 마다 timer가 하나씩 생겨난다.

하지만 그러한 방법은 위험한 방법이다. 여러개의 타이머가 동작할 시, 각 타이머의 callback에 의해 다른 timer의 지연이 발생할 수 있기 때문이다.

여러개의 비동기 작업이 있을때는 timer를 여러개 쓰는것 보다, 하나의 timer에 여러개의 timeCount를 두는것이 더 효율 적일 것이다.

    var timeCount = 1;
    var timeCount2 = 1;
    var timeCount3 = 1;
    function myFunction() {
        setInterval(function(){ 
            timeCount++;
            timeCount++;
            timeCount++;
            if(timeCount%10==0) {
                alert("Hello"); 
            }
            if(timeCount2%20==0) {
                alert("Hello2"); 
            }
            if(timeCount3%30==0) {
                alert("Hello3"); 
            }
        }, 1000);
    }

Ajax

그 외 시간이 많이 걸릴 수 있는 입출력(파일, url 호출 )에 대해 비동기 작업을 지원하고 있다.

Jquery에서 지원하는 기능으로, 파일 입출력이 성공했을때, 혹은 실패했을때에 대한 event 처리를 비동기적으로 할 수 있도록 지원하고 있다.

setTimeout의 적!

  • alert()
  • confirm()
  • prompt()

위의 세가지 function은 javascript로 브라우져 상의 메시지 창을 띄우는 방법이다.

문제는 위 메시지들은 blocking 된다는 것에 있다.

만약 페이지의 이벤트 중 메시지 창을 뛰우는 것이 있다면, setTimeout의 timeCount 증가가 멈추게 될 것이다.

또, timer의 callback 함수도 동기적으로 동작하는 function 이다.

callback 함수에서 너무 무거운 function을 호출하게 되면, timer가 지연될 수 있다는 것을 염두에 두어야 한다.

참조

http://www.w3schools.com/jsref/metwinsettimeout.asp

Profile
8
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
공지 [팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 402
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 318
75 [팁] 정규식 테스트 사이트 모음 profile 이온디 2019.11.12 16
74 [팁] offset().top 오류 profile 이온디 2019.04.27 418
73 [팁] 프레임셋 안에서 주소창 주소변경하기 profile 이온디 2019.04.06 98
72 [라이브러리] 제이쿼리 패럴랙스 profile 이온디 2018.07.17 35
71 [팁] animation json lottie profile 이온디 2018.03.28 27
70 [editor] Froala Editor profile 이온디 2017.10.22 35
69 [팁] 얇은 스크롤바 profile 이온디 2017.10.11 71
68 [팁] li 더블클릭 편집 profile 이온디 2017.09.12 32
67 [팁] 핫키 소스 profile 이온디 2017.06.29 40
66 [기초] 자바스크립트 innerHTML 을 이용한 H1~H5 자동입력 profile 이온디 2017.05.17 48
65 [차트] Chart.js profile 이온디 2017.03.29 450
64 [라이브러리] 가격 범위 슬라이더 스크립트(1) - Ion.RangeSlider profile 이온디 2017.01.02 203
63 [라이브러리] parallax.js 패럴럭스 스크립트 profile 이온디 2016.07.18 0
62 [팁] 자바스크립트 카운터 및 가격 계산 profile 이온디 2016.07.03 1580
61 [라이브러리] 자바스크립트 로딩바 progressbar.js profile 이온디 2016.06.17 100
60 [라이브러리] 자바스크립트 로딩바 nprogress profile 이온디 2016.06.17 113
59 [라이브러리] 자바스크립트 프로그레스바 page.js profile 이온디 2016.06.17 90
58 [고급팁] Javascript 바보들을 위한 Promise 강의 - 도대체 promise는 어떻게 쓰는 거야? profile 이온디 2016.06.10 96
57 [고급팁] 동기와 비동기 프로그래밍 profile 이온디 2016.06.10 44
[고급팁] Javascript 비동기 프로그래밍 profile 이온디 2016.06.10 103