댓글 검색 목록

[javascript] JavaScript의 어려운 부분 마스터하기 : Asynchronicity III

페이지 정보

작성자 운영자 작성일 20-09-05 15:36 조회 653 댓글 0

연습 6

함수 func, 숫자 간격 및 다른 숫자 기간의 세 가지 인수를 허용하는 everyXsecsForYsecs라는 함수를 작성하십시오. everyXsecsForYsecs는 밀리 초 간격마다 주어진 함수를 실행하지만 기간 밀리 초 후에 자동으로 중지됩니다. 그런 다음 아래 sayHi 함수를 1000 간격 시간과 5000 기간 시간으로 everyXsecsForYsecs 호출에 전달하십시오. 어떤 일이 일어날 것으로 예상합니까?

https://dev.to/ryanameri/mastering-hard-parts-of-javascript-asynchronicity-iii-2e42

function everyXsecsForYsecs() {}
function theEnd() {
  console.log("This is the end!");
}
everyXsecsForYsecs(theEnd, 2, 20);
// should invoke theEnd function every 2 seconds, for 20 seconds): This is the end!

해결책 6

function everyXsecsForYsecs(func, interval, duration) {
  const id = setInterval(func, interval * 1000);
  function clear() {
    clearInterval(id);
  }
  setTimeout(clear, duration * 1000);
}

이것은 setInterval 및 clearInterval을 실행하는 또 다른 방법 인 이전 연습과 매우 유사합니다. 여기서 실행할 함수는 인수로 전달되지만 그 외에는 모든 것이 익숙해 보일 것입니다.

연습 7

첫 번째 인수로 숫자 ( 'target'이라고 함)를 받아들이고 두 번째 인수로 밀리 초 ( 'wait'라고 함) 수를 받아들이고 함수를 반환하는 함수 delayCounter를 작성합니다.

반환 된 함수가 호출되면 'wait'밀리 초 간격으로 1과 대상 번호 사이의 모든 숫자를 콘솔에 기록해야 합니다.

function delayCounter() {}

const countLogger = delayCounter(3, 1000);
countLogger();
//After 1 second, log 1
//After 2 seconds, log 2
//After 3 seconds, log 3

해결책 7

function delayCounter(target, wait) {
  function closureFn() {
    let i = 1;
    const id = setInterval(() => {
      console.log(i);
      i++;
      if (i > target) clearInterval(id);
    }, wait);
  }
  return closureFn;
}

우리는 콜백, 클로저 및 비동기성에 대해 연습 한 모든 개념을 여기서 잘 사용하고 있습니다! 설명은 우리의 함수가 다른 함수를 반환해야 한다고 요구하므로 우리는 클로저에 대해 이야기하고 있습니다. setInterval에 주어진 콜백 함수에서도 clearInterval을 호출합니다. setInterval이 호출 될 때마다 외부 범위 (메모리)에서 선언 된 카운터 i를 증가 시킵니다. 카운터가 여전히 목표보다 낮은 지 확인하고 그 이상이 되면 clearInterval을 실행합니다.

연습 8

약속 된 값을 받는 함수를 작성하십시오. 이 함수는 2 초 후에 해결되는 promise를 반환합니다.

function promised() {}

const createPromise = promised("wait for it...");
createPromise.then((val) => console.log(val));
// will log "wait for it..." to the console after 2 seconds

해결책 8

function promised(val) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(val), 2000);
  });
}

Promise의 구문에 익숙하지 않은 경우 (힌트 : 항상 MDN이 있음) 약간 혼란스러워 보일 수 있습니다. 기억해야 할 중요한 점은 프라 미스가 하나 또는 두 개의 매개 변수를 취할 수 있다는 것입니다. 첫 번째는 프라 미스가 해결 될 때 호출되는 함수이고 두 번째 (선택 사항, 여기에 표시되지 않음)는 작업이 실패 할 때 호출되는 함수입니다.

따라서 이 연습에서는 Promise를 생성하고 반환합니다. .then 메서드가 호출되면 Promise에 resolve 함수가 제공됩니다. 여기서는 setTimeout을 2 초로 설정하여 해당 함수를 실행합니다.

연습 9

시작 및 재설정이라는 두 가지 메서드를 사용하여 SecondClock 클래스를 작성합니다. start : 호출시 매초 인수에서 콜백 (생성자에 정의 된 this.cb)을 호출합니다. 콜백에 대한 인수는 현재 초 "값"입니다.

즉, 콜백은 시계의 "초침"에서 1 초마다 호출됩니다. 항상 1로 시작하고 현재 컴퓨터 시계 시간의 초 값을 사용하지 마십시오.

값이 1 인 첫 번째 "틱"은 초기 "secondClock"호출 1 초 후에 발생합니다. 값이 2 인 두 번째 "틱"은 초기 "secondClock"호출 2 초 후에 발생합니다.

값이 60 인 60 번째 "틱"은 초기 "secondClock"호출 후 60 초 후에 발생합니다. 값이 1 인 60 번째 "틱"은 초기 "secondClock"호출 후 61 초 후에 발생합니다. 값이 2 인 60 초 "틱"은 초기 "secondClock"호출 후 62 초에 발생합니다. 기타

재설정 : 호출시 "시계"를 완전히 중지합니다. 또한 시간을 다시 시작으로 재설정 합니다. 힌트 : setInterval 및 clearInterval을 찾습니다.

class SecondClock {}

const clock = new SecondClock((val) => {
  console.log(val);
});
console.log("Started Clock.");
clock.start();
setTimeout(() => {
  clock.reset();
  console.log("Stopped Clock after 6 seconds.");
}, 6000);

해결책 9

class SecondClock {
  constructor(cb) {
    this.cb = cb;
    this.seconds = 0;
    this.id = undefined;
  }
  start() {
    this.id = setInterval(() => {
      this.seconds++;
      this.cb(this.seconds % 60);
    }, 1000);
  }
  reset() {
    this.seconds = 0;
    clearInterval(this.id);
  }
}

설명은 다시 약간 벅차게 보이지만 항상 문제를 해결하기 위해서는 문제를 더 간단한 부분으로 분해해야 합니다. 이 연습 문제를 해결하려면 클래스 구문에 대한 약간의 지식도 필요하며,이 시리즈의 다음 섹션에서 많이 연습 할 것입니다.

이 연습이 우리에게 보여주고 자하는 것은 연습 7과 매우 유사한 것을 구현하는 방법입니다. 여기서는 클로저 대신 클래스 구조를 사용합니다. 따라서 메모리 역할을 하는 외부 변수 대신 여기에 메모리가 클래스 필드입니다. 우리는 생성자에서 우리에게 처음 주어진 콜백 함수를 사용하여 기본적으로 카운터를 조작하는 두 개의 클래스 메소드를 가지고 있습니다.

연습 10

함수를 받아들이고 반환 된 함수가 마지막으로 실행 된 이후 간격 밀리 초가 지난 후에 주어진 함수의 호출 만 허용하는 새 함수를 반환하는 debounce라는 함수를 작성합니다.

간격 시간 내에 반환 된 함수에 대한 추가 호출을 호출하거나 대기열에 넣어서는 안되지만 타이머는 여전히 재설정 되어야 합니다.

디 바운싱의 예는 이 CSS 트릭 문서를 확인하세요.

function debounce() {}

function giveHi() {
  return "hi";
}
const giveHiSometimes = debounce(giveHi, 3000);
console.log(giveHiSometimes());
// should output 'hi'
setTimeout(function () {
  console.log(giveHiSometimes());
}, 2000);
// should output undefined
setTimeout(function () {
  console.log(giveHiSometimes());
}, 4000);
//should output undefined
setTimeout(function () {
  console.log(giveHiSometimes());
}, 8000);
// should output 'hi'

해결책 10

function debounce(callback, interval) {
  let counter = 0;
  let hasRan = false;
  function closureFn() {
    let id = undefined;
    if (!hasRan) {
      ///this is the first run
      id = setInterval(() => counter++, 1);
      hasRan = true;
      return callback();
    } else {
      //for subsequent runs
      if (counter < interval) {
        // Not enough time has elapsed
        counter = 0;
        clearInterval(id);
        id = setInterval(() => counter++, 1);
        return undefined;
      } else {
        //Enough time has elapsed
        counter = 0;
        clearInterval(id);
        id = setInterval(() => counter++, 1);
        return callback();
      }
    }
  }
  return closureFn;
}

디 바운싱 및 조절은 현대 웹 개발에서 중요한 개념입니다 (이 기능은 많은 라이브러리에서 제공됨). 여기서는 클로저와 콜백을 사용하여 간단한 디 바운스를 구현합니다. 함수가 이전에 실행되었는지 여부를 나타내는 카운터와 플래그가 필요합니다. 이러한 변수는 메모리에 있어야 하므로 외부 범위에 있어야 합니다. 그런 다음 setInterval을 사용하여 카운터를 증가 시키고 후속 실행에서 충분한 시간이 경과했는지 확인합니다 (간격 기준). 충분한 시간이 지나지 않았다면 카운터를 재설정하고 undefined를 반환해야 합니다. 충분한 시간이 지나면 카운터를 다시 재설정 하지만 이번에는 콜백을 실행하고 반환합니다.

이것은 우리의 비동기 성 챕터를 마무리합니다. 다음으로 클래스와 프로토 타입을 자세히 살펴 보겠습니다.