사용자 인터랙션을 기반으로 실행되는 자바 스크립트 헬퍼 함수

구글 페이지스피드 결과, 모두 초록색 합격점을 받기란 실질적으로 너무 힘들다

function onUserInteraction(callback, timeout = 5000) {
    if (typeof callback !== 'function') return;

    let triggered = false;
    const events = ['scroll', 'mousemove', 'touchstart', 'keydown'];

    const doTrigger = () => {
        if (triggered) return;
        triggered = true;
        callback();
        events.forEach(e => window.removeEventListener(e, handleInteraction));
    };

    const handleInteraction = (event) => {
        if (event.type === 'scroll' && window.scrollY === 0) return;
        doTrigger();
    };

    events.forEach(e => {
        window.addEventListener(e, handleInteraction, { passive: true });
    });

    setTimeout(doTrigger, timeout);
}Copy

onUserInteraction(() => {
    initAd();
});

onUserInteraction(() => console.log('A triggered'));
onUserInteraction(() => console.log('B triggered'));Copy

최초 페이지 로드시 화면

사용자 인터렉션 이후 최종 화면