이동하기 전에 스피너를 사용하여 클래스 추가

Question

사용자가 enter를 클릭 한 후 특정 항목을 해결하기위한 코드를 작성하려고합니다. 때로는 시간이 걸릴 수 있으므로 사용자가 작동하고 있음을 알 수 있도록 div 모양을 회 전자처럼 보이게합니다.

이 작업을 수행하려면 해결할 DOM 개체에 클래스를 추가하여 회 전자처럼 보이게 만듭니다. 내 문제는 클래스가 추가되기 전에 해결 알고리즘이 완료된다는 것입니다. 문제를 해결하기 위해 여러 가지 방법을 시도했지만 모두 실패했습니다. 여기에는 연기 된 객체의 다양한 구현과 promise 메소드가 포함됩니다.

코드에서 이동하기 전에 DOM 조작이 완료되었는지 확인할 수있는 방법이 있습니까?

Answer 1

예, 저속 코드를 0으로 제한하십시오. 이렇게하면 UI를 실행하기 전에 따라 잡을 수 있습니다.

window.setTimeout(function() { ... your code ...},0); 

참조 : 당신의 시간이 소요되는 코드를 시작보다 Why is setTimeout(fn, 0) sometimes useful?

Answer 2

먼저, 스피너를 추가합니다. 반대 순서로 작업하는 것처럼 보입니다 (코드를 제공하지 않은 것 같습니다).