JavaScript의 2가지 유용한 폴링 기능

때로는 명령을 실행하거나 함수를 호출하거나 다른 작업을 수행하기 전에 어떤 일이 일어나기를 기다려야 합니다.
내가 의미하는 바는 다음과 같습니다.

HTML 요소의 렌더링

JavaScript 이벤트

API의 응답

그리고 다른 많은 것들.

이러한 시나리오를 처리하기 위해 몇 가지 함수를 작성하는 방법을 살펴보겠습니다.

폴링 기능 1: HTML 요소 대기

var waitForElement = function(elem) {
    if (typeof  elem  ==  'string') {
        return  new Promise(function (resolve) {
            var  wfelem  =  function () {
                if (null  !=  document.querySelector(elem)) {
                    resolve(document.querySelector(elem));
                } else {
                    window.requestAnimationFrame(wfelem);
                }
            };
            wfelem();
        });
    }
};

특정 HTML 요소를 기다려야 할 때 위의 폴링 기능을 사용할 수 있습니다.

예시:

waitForElement('button#addToCart').then(function(button) {
     button.textContent = 'Buy Now';
});

폴링 함수 2: 함수가 true를 반환할 때까지 기다립니다.

waitUntil = function(callback) {
    if (typeof callback === 'function') {
        return new Promise(function(resolve, reject) {
        var tick = setInterval(function() {
            if (callback() === true) {
                clearInterval(tick);
                return resolve();
            }
        });
    });
    } else {
        console.error(callback + ' should be a function');
    }
};

위의 함수를 사용하여 코드를 추가로 실행하기 전에 하나 이상의 조건이 기준을 충족할 때까지 기다릴 수 있습니다.

예시:

window.waitUntil(function () {
    return "complete" == document.readyState;
}).then(function () {
    console.log("Page loading complete!");
});