wait-for-it.js가 "기다렸다가 다시 전화하겠습니다"라고 말했습니다.

함수를 실행하기 전에 웹 페이지에서 일부 HTML 요소를 기다려야 하는 상황에 직면한 적이 있습니까?
더 이상 기다리지 마세요. wait-for-it.js가 여러분을 기다리고 있습니다.

그것은 무엇을 제공합니까?

지정된 (선택기) 요소가 페이지에 추가될 때 함수(콜백)를 실행하는 훨씬 간단한 방법을 제공합니다.

어떻게 작동합니까?

작업을 수행하기 위해 자신의 JavaScript만 사용합니다. 즉, JavaScript의 MutationObserver API 입니다. 여기에서 코드를 자세히 살펴볼 수 있습니다.

씨스테이얍 / wait-for-it.js

문서에 특정 요소가 추가되면 기능을 실행할 수 있도록 해주는 JavaScript 라이브러리

어디에서 사용할 수 있습니까?

페이지 콘텐츠를 변경하는 외부 라이브러리를 사용 중이고 이러한 변경이 있을 때 함수를 실행하려고 하지만 라이브러리 자체는 어떤 종류의 이벤트도 발생시키지 않는다고 가정합니다.

이 문제를 처리하는 한 가지 방법은 자신의 라이브러리 사본을 만들고 필요에 맞게 해당 라이브러리를 편집하는 것이지만 이 접근 방식에는 다른 제한이 있을 수 있습니다. 예를 들어,

라이브러리가 업데이트될 때마다 버전을 수동으로 업데이트해야 할 수 있습니다.

해당 라이브러리는 서버에서 사용하지 않을 때 사용을 제한합니다.

위에서 언급한 것과 같은 시나리오에서 제어할 수 있는 유일한 코드는 사용자의 것입니다. 따라서 할 수 있는 일은 콘텐츠 변경을 기다릴 수 있는 코드에 wait-for-it.js를 포함하고 지정한 CSSselector가 나타나면 지정한 callback 함수를 실행하기만 하면 됩니다. 이렇게 하면 특정 라이브러리가 업데이트되더라도 코드를 변경할 필요가 없습니다.

어떻게 사용합니까?

1단계: jsDelivr CDN을 사용하여 웹페이지에 포함

<script src="https://cdn.jsdelivr.net/gh/cstayyab/[email protected]/wait-for-it.js"></script>

2단계: 청취할 aselector를 등록합니다.

waitForElement('#food', function () {
    alert("Your Food is Here!");
});

3단계: 짜잔!!

v0.1.1 업데이트

이제 세 번째 매개변수timeout ~ waitForElement를 지정할 수 있습니다. 지정된 시간에 지정된 요소가 나타나지 않으면 대신 timeout = true 인수로 콜백 함수가 호출되고 selector도 대기열에서 제거됩니다. 다음은 예입니다.

waitForElement('#NonExistentSelector', function (timeout) {
    if(timeout === true) {
        console.log('As Expected, Element with #NonExistentSelector did not appear in 1000 milliseconds.');
        return;
    }
    console.log('This is not possible at all!');
}, 1000);

자유롭게 별표 표시하고 포크하세요GitHub.