JavaScript에서 요소 존재를 효율적으로 기다릴 수 있는 방법은 무엇입니까?

MutationObserver를 사용하여 요소 존재 대기

Chrome 확장 프로그램 개발에서 겪은 것처럼 요소가 언제 사용 가능한지 아는 것이 중요합니다. 페이지. 간격을 사용하여 모양을 확인하는 것이 일반적인 접근 방식이지만 비효율적일 수 있습니다. 다행스럽게도 jQuery는 간단한 솔루션을 제공하지 않습니다.

현대적이고 효과적인 대안은 MutationObserver API를 활용하는 것입니다. 이를 통해 DOM 트리의 변경 사항을 수신하는 JavaScript 함수를 생성할 수 있습니다.

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
        });
    });
}

이 함수는 선택기를 입력으로 사용하고 요소가 발견되면 확인하는 Promise를 반환합니다.

이를 사용하려면 다음과 같이 작성할 수 있습니다.

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

또는 비동기/대기:

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

위 내용은 JavaScript에서 요소 존재를 효율적으로 기다릴 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!