#GWC UI Library : gwcWaiter 함수

웹 UI 라이브러리인 GWC에서 제공하는 gwcWaiter 함수에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

js 코드는 다음과 같습니다.

let hTimer;

window.onload = () => {
    button.onclick = event => { 
        const waiter = gwcWaiter("대기 중..", () => {
            clearInterval(hTimer);
            gwcMessage("사용자가 강제로 대기를 종료했습니다.");

            return true; // false를 반환하면 강제 종료가 취소됨
        });

        waiter.show();
        
        let i = 0;
        hTimer = setInterval(() => {
            waiter.message(`${i}초 대기 중...`);

            if(i == 5) {
                waiter.hide();
                clearInterval(hTimer);
                gwcMessage("대기 완료");
            }

            i++;
        }, 1000);

    };
};

실행 결과는 다음과 같습니다.

noDelay 속성을 true로 저징하면 모래시계를 즉각 표시하도록 합니다.