이의 내가이 자바 스크립트 함수가 있다고 가정 해 봅시다 스톨. 위의 javascript 함수를 실행하면 함수가 실행되는 동안 회 전자가 중지됩니다. 내가 무슨 말을하고 있는지 보자. here. 기본적으로, 자바 스크립트 CSS 애니메이션을 중지하고, 왜, 또는 다른 사람이이 발견했습니다/해결 방법을 찾지 못했습니다 궁금하네요. 나는 setTimeout (fn, 0)에 넣으려고했는데, fn은 긴 프로세스이지만, 왜 작동하지 않는지 깨달았다. (js는 다중 쓰레드가 아니다). 이 일을 본 사람 있습니까?CSS 애니메이션이 자바 스크립트 함수를 실행할 때
업데이트 : 흥미롭게도 브라우저 인터페이스와의 상호 작용이 여전히 영향을 받고 있지만 Safari에서는 문제가별로없는 것처럼 보입니다.
브라우저 페이지는 단일 스레드입니다. UI 업데이트는 자바 스크립트 프로그램과 동일한 스레드에서 발생합니다. 또한 자바 스크립트 코드가 실행되는 동안 모든 애니메이션이 새 프레임을 그리지 않는다는 것을 의미합니다. 일반적으로 대부분의 JS 코드는 단일 애니메이션 프레임보다 빠르게, 매우 빠르게 실행되기 때문에 별 문제가되지 않습니다.
그래서 가장 좋은 조언은 간단합니다. 그렇게하지 마십시오. JS 엔진을 오래 잠그지 마십시오. 더 깨끗한 방법으로 알아보십시오.
하지만 꼭해야 할 일이 있습니다. HTML5's Web Workers API을 통해 추가 스레드를 얻을 수 있습니다. 이것은 구형 브라우저에서는 지원되지 않지만, 오랫동안 CPU를 빠져 나가는 코드를 메인 웹 페이지와 자신의 스레드에서 멀리 옮기고, 끝나면 결과를 페이지에 다시 게시 할 수 있습니다.
예, 웹 근로자를 보았습니다. 웹 작업자가 DOM에 액세스 할 수 있는지 알고 있습니까? 장기 실행 프로세스는 jQuery에서 발생하는 모든 DOM 업데이트이므로 느린 작업입니다. –
@ChristianBankester 웹 작업자는 DOM에 액세스 할 수 없습니다. 'setTimeout'을 사용해야합니다. – bfavaretto
아, 작동하지 않는 setTimeout을 사용해 보았습니다. 이 업데이트 된 jsfiddle를 참조하십시오 : http://jsfiddle.net/JU4St/2/ –
다른 모든 작업을 계속할 수 있도록 "장기 실행 코드"를 청크로 분할해야합니다. –
맞아,이 방법으로 해결할 수 있음을 알고 있지만,이 기능을 적용하려고하는 가능한 해결책은 아닙니다. 기능은 작은 덩어리로 분해 할 수 없습니다. 위의 정확한 문제에 대한 해결책을 가진 사람이 있는지를 실제로 확인하고 있습니다. 마찬가지로 똑같이 분해 할 수도 없습니다. –