특정 DOM 요소가 나타날 때까지 JavaScript 실행을 일시 중지하려면 어떻게 해야 합니까?

요소가 나타날 때까지 코드를 일시 중지하는 방법은 무엇입니까?

웹 개발에서는 특정 요소가 나타날 때만 작업을 수행해야 하는 경우가 많습니다. 페이지. 이는 특히 JavaScript와 같은 비동기 환경에서 요소의 존재를 확인하는 방법에 대한 질문을 제기합니다.

해결책: MutationObserver API 활용

MutationObserver API는 강력한 DOM의 변화를 감지하는 솔루션입니다. 관찰자 인스턴스를 생성하고 이를 원하는 요소 또는 해당 상위 요소에 할당하면 관찰된 영역 내에서 변형(추가, 제거 또는 속성 변경)이 발생할 때 트리거되는 콜백을 설정할 수 있습니다.

구현

제공된 코드 조각은 다음을 사용하여 재사용 가능한 waitForElm 함수를 생성하는 방법을 보여줍니다. MutationObserver:

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

사용법

'some-class' 클래스가 있는 요소가 나타날 때까지 기다리려면 다음을 사용할 수 있습니다.

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

또는 async/await:

const elm = await waitForElm('.some-class');

이 접근 방식은 다음과 같은 여러 가지 이점을 제공합니다.

• 비 차단: 변경 사항을 수동적으로 모니터링하는 MutationObserver API를 사용합니다. 메인 스레드를 차단하지 않고.
• 아니요 종속성: 네이티브 API에만 의존하므로 타사 라이브러리가 필요하지 않습니다.
• Promise 기반: Promise를 반환하므로 요소의 모양을 편리하게 처리할 수 있습니다. .then() 또는 async/await를 사용합니다.

위 내용은 특정 DOM 요소가 나타날 때까지 JavaScript 실행을 일시 중지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!