코드 애니메이션을위한 JavaScript 실행 일시 중지

Question

JavaScript 코드에 흥미롭지 만 어려운 문제가 있습니다. 기본적으로, 나는 교육적인 이유로 자바 스크립트 (당신이 궁금해하는 경우 정렬 알고리즘)를 사용하여 간단한 알고리즘의 애니메이션을 만들려고합니다. 나는 이미 (RaphaelJS를 사용하여) 작성된 모든 애니메이션 코드를 가지고 있으며, 모든 것이 잘 동작한다. 문제는 적절한 시간에 알고리즘의 애니메이션을 얻는 것입니다. JavaScript는 실제로 실행을 "일시 중지"할 방법이 없으므로 각 단계마다 애니메이션을 천천히 실행하여 알고리즘을 단계적으로 수행 할 수는 없습니다. 알고리즘이 학생이 이해할 수있는 속도로 진행된다면 교육적 관점에서 볼 때 훨씬 더 가치가 있습니다.

내가 생각할 수있는이 문제를 해결하는 방법에는 두 가지가 있으며, 둘 다 빨기도합니다. 첫 번째는 미친 setTimeout() 코드를 사용하는 것입니다. 이것은 아마도 매우 어려울 것입니다 - 알고리즘의 다른 부분을 올바른 타임 아웃과 연관시키기 위해서는 많은 이상한 코드 변환이 필요할 것입니다. 저는 이미이 작업을 조금 해보려했지만, 사소한 알고리즘으로 인해 매우 복잡해졌습니다.

두 번째는 통화 대기입니다. 이것은 아마 또한 작동 할 것입니다. 문제는 JavaScript 코드에서 바쁜 대기가 꽤 나쁜 생각이라는 것입니다. 실제로이 대안을 테스트 할 때 Firefox를 추락 시켰습니다. 기본적으로, 내가 바라 보는 또 다른 해결책이 있는지 궁금 하네. 학교 서버의 정적 HTML 및 자바 스크립트 이외의 다른 서비스를 제공해야하는 자유의 양이 의심 스럽기 때문에 솔루션이 클라이언트 측만인 경우 보너스 포인트입니다.

Answer 1

알고리즘이 학생이 이해할 수있는 속도로 진행된다면 교육적 관점에서 훨씬 더 가치가 있습니다.

예를 들어 링크/버튼 사용은 어떻게됩니까? <> 사용자가 이전/다음을 클릭하여 코드를 단계별로 실행할 수 있도록 허용 하시겠습니까?

아마도 유일하게 실행 가능한 해결 방법이며 최종 사용자에게 더 적합한 방법 일 수 있습니다.

Answer 2

아마도 이것은 원하는 작업을 수행하기에는 너무 간단하지만 정지 사이에서 실행하려는 코드 세그먼트를 함수에 넣은 다음 해당 함수를 버튼 누르기/클릭으로 호출하면 페이지에서 : onclick="runAnimationPiece()"

코드는 마지막으로 함수가 실행 된 시점에서 중단 된 부분을 알기 위해 일부 상태를 유지해야합니다.

애니메이션의 다른 부분에 대해 다른 기능을 실행해야하는 경우 (예 : 첫 번째 부분은 foo1(), 두 번째 부분은 foo2()에 의해 생성되어야 함), 카운터 및 함수를 생성 할 수 있습니다 카운터를 기반으로 적절한 애니메이션 함수 (foo1() 또는 foo2() 등)를 호출합니다.