프로미스가 이행돼요. 리액션이 레이블을 Loading에서 Calculating으로 바꿔요. 긴 동기 계산이 돌아요. 레이블이 Done이 돼요. 사용자가 세 레이블을 순서대로 다 봤겠거니 하기 쉬운데, 저는 가운데 것이 화면에 뜨기나 했을지 의심스러워요.
대입에는 순서가 있어요. 화면에 무엇이 그려지는지는 또 다른 이야기예요. 프로미스 리액션은 잡으로 실행되고, HTML 이벤트 루프의 마이크로태스크 체크포인트는 렌더링 기회와 별개예요. 그 리액션 안에서 레이블을 바꿨다고 해서 계산이 시작되기 전에 Calculating이 그려진다는 보장은 없어요. 쓸모 있는 진행 표시를 하려면 렌더링할 틈이 생기도록 작업 구조를 바꿔야 하고, 이행을 페인트 확인처럼 여기면 안 돼요.
같은 핸들러로 두 번째 장면이에요. 요청 A가 진행 중이에요. 사용자가 A를 취소하고 B를 시작해요. B가 현재 요청이 된 뒤에 A의 완료가 도착해요. 화면은 B의 상태를 유지해야 하고, A가 그 위에 Done을 덮어쓰면 안 돼요. 대신할 요청 없이 취소만 했다면 화면은 알아볼 수 있는 상태로 끝나야 해요.
그러니 이 핸들러를 설명하려면 두 가지가 먼저 있어야 해요. 렌더링할 기회, 그리고 어떤 결과를 받아들일지에 대한 규칙이요.