javascript - 연동메뉴 동기화 만료 문제

Question

오늘 무한연동 메뉴를 구현한 글을 봤는데, 작성자가 데이터 만료 문제를 다룰 때 이해하지 못한 것 같습니다.

• 생각하기 쉬운 것은 비동기 만료 문제입니다. 1단계 메뉴가 변경되어 2단계 메뉴의 콘텐츠를 가져오지만 네트워크 속도가 느리고 프로세스가 3초 정도 걸린다고 상상해 보세요. . 1초 후 사용자는 1단계 메뉴를 다시 변경하여 2단계 메뉴의 내용을 다시 가져옵니다. 이때 네트워크 속도는 더 빨라지고 1초 후에 데이터가 반환되며 2단계 메뉴가 다시 시작됩니다. 레벨 메뉴가 다시 렌더링되지만 1초 후에 이 요청의 결과가 반환되고, 실제로는 1단계 메뉴가 다시 렌더링됩니다. 그 이후로 변경되었으며 콘텐츠가 만료되었습니다. 이 렌더링은 잘못되었습니다. 클로저를 사용하여 데이터 만료 확인을 수행할 수 있습니다.

• 생각하기 쉽지 않은 것은 동기 만료 문제입니다(실제로도 비동기식이지만 io 상호 작용이 없으면 버퍼 시간이 0인 타임아웃 함수입니다). 즉, 이벤트가 존재하기 때문입니다. 주의하지 않으면 대기열이 만료될 수 있습니다. 코드에 관련 참고 사항이 있습니다.

첫 번째 만료 이유를 알 수 있나요? 두 번째 만료 이유는 무엇인가요? 어떻게이 일이 일어 났어요?

Answer 1

저자의 말대로 버퍼 시간이 0인 타임아웃 기능입니다. 첫 번째 수준 메뉴에서 두 번째 수준 메뉴로의 업데이트가 setTimeout() 함수에 기록되면 이는 비동기 작업입니다. 또한 후속 작업이 인터페이스를 먼저 업데이트하고 이전 작업의 결과가 만료됩니다. .