wait-for-it.js가 "기다렸다가 다시 전화하겠습니다"라고 말했습니다.
3854 단어 cssshowdevjavascripthtml
더 이상 기다리지 마세요.
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단계: 청취할 a
selector
를 등록합니다.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.
Reference
이 문제에 관하여(wait-for-it.js가 "기다렸다가 다시 전화하겠습니다"라고 말했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cstayyab/let-me-wait-for-it-and-call-you-back-said-wait-for-it-js-50h1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)