일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 이벤트 위임
- 구현 패턴
- 자소 단위 삭제 해제
- Sync & Async
- details marker 제거
- State Control
- olkb
- 절차 지향과 객체 지향
- 프론트엔드 개발환경
- static 키워드
- 글자 단위 삭제
- JavaScript
- 콜맥
- 브라우저 렌더링
- 날개셋 한글 입력기
- Runtime Execution
- 개발자 도구 활용
- ortholinear
- 쿼티
- 오버로딩과 오버라이딩
- 영수증 가계부
- version specifications
- 프리오닉
- 창 그룹화
- 복사한것을파일로
- colemak
- 글자 지우기
- super 메소드
- Paste Into File
- 탭 관리 프로그램
Archives
- Today
- Total
What got you here won't get you there
Non-blocking JavaScript - 1 본문
setTimer
const Item = class {
time;
block;
constructor(block, time) {
this.block = block;
this.time = performance.now();
}
}
const queue = new Set;
const f = time => {
queue.forEach(item => {
if (item.time > time) return;
queue.delete(item);
item.block();
});
requestAnimationFrame(f);
};
requestAnimationFrame(f);
const timeout = (block, time) => queue.add(new Item(block, time));
timeout(_ => console.log("hello"), 1000);
Non Blocking For
// blocking for
const working = _ =>{};
for (let i = 0; i < 100000; i++) working();
// non-blocking for
const nbFor = (max, load, block) => {
let i = 0;
const f = time => {
let curr = load;
while(curr-- && i < max) {
block();
i++;
}
console.log(i);
if (i < max - 1) timeout(f, 0);
}
timeout(f, 0);
};
nbFor(100, 10, working);
Generator
const gene = function* (max, load, block) => {
let i = 0, curr = load;
while (i < max) {
if (curr--) {
block();
i++;
} else {
curr = load;
console.log(i);
yield;
}
}
};
const nbFor = (max, load, block) => {
const iterator = gene(max, load, block);
const f = _ => iterator.next().done || timeout(f, 0);
timeout(f, 0);
};
nbFor(100, 10, working);
Promise
const gene2 = function* (max, load, block) {
let i = 0;
while (i < max) {
yield new Promise(res => {
let curr = load;
while (curr-- && i < max) {
block();
i++;
}
console.log(i);
timeout(res, 0);
});
}
};
const nbFor = (max, load, block) => {
const iterator = gene2(max, load, block);
const next = ({value, done}) => done || value.then(v => next(iterator.next()));
const next(iterator.next());
};
'Web App' 카테고리의 다른 글
웹 기초 (0) | 2021.09.07 |
---|---|
성능 최적화 (0) | 2021.09.06 |
[JS] Object property order (0) | 2021.07.13 |
JavaScript - 1 (Version Specifications) (0) | 2021.06.17 |
웹 앱, 자바스크립트 (0) | 2021.06.16 |
Comments