setTimeout typescript

1
2
class Dice {
sto: ReturnType<typeof setTimeout>;
  • typescript로 웹 스크립트를 짜고 있다
  • clearTimeout을 사용하기 위해 멤버 변수 sto를 넣었다
  • 근데 setTimeout의 타입이 뭘까?
  • 에디터에서 NodeJS.Timeout라고 알려주긴 하는데..
  • 내 런타임을 노드가 아니라 브라우저다
  • ReturnType<fn>을 사용하면 브라우저든 SSR이든 걱정 없다고 한다

참고

setTimeout Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const delay = (ms) => {
return new Promise((resolve) =>
setTimeout(() => {
resolve(ms);
}, ms)
);
};
const main = async () => {
console.log(`main start`);

const result = delay(1000);
result.then(console.log);
console.log(`main end`);
};

const main2 = async () => {
console.log(`main start`);

const result = await delay(1000);
console.log(result);
console.log(`main end`);
};

main();
// main2();
  • promise를 알려주는 여러 글, 영상에서 setTimeout으로 예제로 진행한다
  • setTimeout을 promise로 감싸면 딜레이를 만들 수 있다
  • promise가 처음에 엄청 헷갈리는데, 막힐 때마다 이 예제를 먼저 작성해보고 적용해보았던 것 같다

참고

chrome inactive tab setTimeout, setInterval 실행 느림

  • 브라우저에서 js 코드 실행속도가 이상하게 느려져서 어떤 문제인가했는데,
  • 개발자도구를 새창으로 열고(콘솔보는용도로)
  • 탭을 백그라운드로 보내버렸더니 생긴문제였다
  • setTimeout, setInterval 메서드의 경우 탭이 인액티브 상태이면 1초 이상으로 제한된다고 한다
  • 인액티브 상태는 최소화하는 등 화면에서 사라지는 경우를 말하는 것 같다
1
2
3
setInterval(() => {
log(1);
}, 100);
  • 위코드를 작성하고 개발자도구 콘솔창을 새창으로 열고
  • 탭을 최소화하면 1초 간격으로 실행되는 것을 확인 할 수 있다

참고