[JS] 비동기프로그래밍 - Callback, Promise, Symbol

        let timerId = setTimeout(function tick() {
          alert('tick');
          timerId = setTimeout(tick, 2000);
            // 현재 실행 끝난 후 2초간 딜레이 후 실행
            // 딜레이 시간을 쓰지 않으면 바로 동기적으로 실행함
        }, 2000);

            let delay = 5000;

            let timerId = setTimeout(function request() {
              // 요청 전송

              if(서버 과부하 때문에 요청이 실패한다면) {
                // 다음 실행까지 인터벌을 좀 늘리자
                delay *= 2;
              }

              timerId = setTimeout(request, delay);

            }, delay);

    let i = 0;

    let start = Date.now();

    function count() {

      // 1부터 1000000000 세는 무거운 작업 
        // cpu 잠깐 멈출 듯함
      for (let j = 0; j < 1e9; j++) { 
        i++;
      }

      alert("Done in " + (Date.now() - start) + 'ms');
    }

    count();

    // setTimeout으로 스케줄링

    let i = 0;
    let start = Date.now();

    function count() {
      // 약간의 무거운 작업을 해봅시다. 1000000 단위로만 센다
      do {
        i++;
      } while (i % 1e6 != 0);

      if (i == 1e9) {
        alert("Done in " + (Date.now() - start) + 'ms');
      } else {
        setTimeout(count);
            // 호출을 스케쥴링합니다.
            // 1000000000에 도달하지 않았다면 다시 동기적으로 실행
      }
    }

    count();

    // 이 경우 작업을 setTimeout으로 나누든 안나누든 큰 차이는 없다

    // 차이를 만들기 위한 개선 코드

    let i = 0;
    let start = Date.now();

    function count() {
      // 스케줄링을 함수의 도입부로 옮김
      if ( i < 1e9 - 1e6) {
        setTimeout(count); // 함수 종료 후 실행됨
      }

      do {
        i++;
      } while (i % 1e6 != 0);

      if ( i == 1e9) {
        alert("Done in " + (Date.now() - start) + 'ms');
      }

    }

    count();

    // 작업전 스케줄링 후 작업 실행시 시간이 적게든다
    // 브라우저에 중첩된 타이머 딜레이를 최소화 가능하기 때문
    // 브라우저에서는, 중첩된 타이머를 얼마나 자주 동작할 수 있는지에 대한 제한이 있다.
    //  HTML5 표준은 "5개의 중첩된 타이머 이후에는 간격이 적어도 강제로 4ms 만큼 있을 것입니다." 
    // 라고 말한다.
    // 보통 실행시 1 1 1 1 9 15 24 ... 중첩되는 타이머가 늘어갈수록 점점 딜레이가 늘어간다
    // 스케줄링은 어느 부분에 하느냐에 따라서도 딜레이가 달라지게 된다

    <div id="progress"></div>

    <script>
    let i = 0;

    function count() {
      for (let j = 0; j < 1e6; j++) {
        i++;
        // 현재의 i 값을 progress div에 넣습니다.
        // innerHTML에 대해 더 알아봅시다.
        progress.innerHTML = i; // 다 i 작업 끝난후에 html에 반영된다 
      }
    }

    count();
    </script>

    // setTimeout 적용

    <div id="progress"></div>

    <script>
      let i = 0;

      function count() {

        // do a piece of the heavy job (*)
        do {
          i++;
          progress.innerHTML = i;
        } while (i % 1e3 != 0);

        if (i < 1e9) {
          setTimeout(count); // 순차적으로 html에 계속 반영
        }

      }

      count();
    </script>

        // 콜백만 적용

        function getData(callbackFunc) { 
        $.get('url 주소/products/1', function (response) 
                    { callbackFunc(response);
                    // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 
        }); }

        getData(function (tableData) { 
                    console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 
                    });

        // 프로미스 적용

        function getData(callback) {

        // new Promise() 추가

         return new Promise(function (resolve, reject) { // 성공 아니면 실패

        $.get('url 주소/products/1', function (response) {
            // 데이터를 받으면 resolve() 호출 
        resolve(response); }); }); }

        // getData()의 실행이 끝나면 호출되는 then()
        getData().then(function (tableData) { // resolve()의 결과 값이 여기로 전달됨
                console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
         });

        var includes = Symbol('즐거운 자바스크립트');
        // Symbol은 객체는 아니다

        Array.prototype[includes] = function () {
          return console.log('its Symbol');
        }

        var arr = [1, 2, 3];
        arr.includes(1); // true
        arr['includes'](1); // true
        // arr 기본 메서드 동작
        arr[includes](); // its Symbol // Symbol('즐거운 자바스크립트'); 가 Key로 들어감
        // 충돌하지 않고 Symbol객체로 만든 key 동작

            'hyunwoo'.search(/woo/); // 4

            // 실행시 'hyunwoo'가 String 객체로 변환되고 내부의 search 메서드가
            // Symbol.search메서드에 접근