@jood/appearer
Version:
javascript intersection observer
84 lines • 7.75 kB
JavaScript
import { BaseActor } from './base-actor';
import { AppearEvent } from '../common/types';
/**
* Stage 에 등록될 Actor.
* 스테이지에 진입을 한번만 감지하되, 진입 후 너무 빠르게 이탈시에는 감지 처리를 하지 않는 느린 감지형.
* (사용 예: 촘촘한 상품 목록과 같이 빠르게 스크롤 하여 지나칠 수 있는 곳)
* @class LazyActor
* @extends {BaseActor}
*/
export class LazyActor extends BaseActor {
constructor() {
super(...arguments);
this.appearTimer = null;
this.checkoutDelay = 1000;
this.appearDelay = 150;
}
/**
* 느린 감지를 시작하기 전 대기 시간.
* 지정된 시간 전에 감지된 진입은 느린 감지를 하지 않고 바로 진입을 알림.
* @param [delay=1000]
*/
setCheckoutDelay(delay = 1000) {
this.checkoutDelay = delay;
}
/**
* 지정된 시간 사이에 진입 후 진출을 하는 경우 진입 알림을 하지 않는 대기 시간.
* @param [delay=150]
*/
setAppearDelay(delay = 150) {
this.appearDelay = delay;
}
/**
* 진입 대기 타이머 파기
*/
clearAppearTimer() {
if (this.appearTimer) {
clearTimeout(this.appearTimer);
this.appearTimer = null;
}
}
/**
* 스테이지 진입. 진입 후 일정시간 (appearDelay) 전에 이탈하는 경우는 진입으로 취급하지 않음.
* @override
* @param [entry]
*/
appear(entry) {
this.clearAppearTimer();
if (this.isAppear === true)
return;
if (this.checkoutDelay <= entry.time) {
this.appearTimer = setTimeout(() => {
this.doAppear(entry);
}, this.appearDelay);
}
else {
this.doAppear(entry);
}
}
/**
* 실제 진입 처리.
* @private
* @param entry
*/
doAppear(entry) {
this.isAppear = true;
this.dispatch(AppearEvent.APPEAR, entry);
if (this.stage) {
this.stage.unobserve(this);
}
}
/**
* 스테이지 이탈.
* @override
* @param entry
*/
disappear(entry) {
this.clearAppearTimer();
if (!this.isAppear)
return;
this.isAppear = false;
this.dispatch(AppearEvent.DISAPPEAR, entry);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eS1hY3Rvci5qcyIsInNvdXJjZVJvb3QiOiIvaG9tZS9ydW5uZXIvd29yay9qb29kLWFwcGVhcmVyL2pvb2QtYXBwZWFyZXIvcHJvamVjdHMvcGFja2FnZXMvc3JjLyIsInNvdXJjZXMiOlsiYWN0b3IvbGF6eS1hY3Rvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxXQUFXLEVBQWMsTUFBTSxpQkFBaUIsQ0FBQztBQUUxRDs7Ozs7O0dBTUc7QUFDSCxNQUFNLE9BQU8sU0FBVSxTQUFRLFNBQVM7SUFBeEM7O1FBQ1UsZ0JBQVcsR0FBUSxJQUFJLENBQUM7UUFDeEIsa0JBQWEsR0FBVyxJQUFJLENBQUM7UUFDN0IsZ0JBQVcsR0FBVyxHQUFHLENBQUM7SUFzRXBDLENBQUM7SUFwRUM7Ozs7T0FJRztJQUNILGdCQUFnQixDQUFDLFFBQWdCLElBQUk7UUFDbkMsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7SUFDN0IsQ0FBQztJQUVEOzs7T0FHRztJQUNILGNBQWMsQ0FBQyxRQUFnQixHQUFHO1FBQ2hDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO0lBQzNCLENBQUM7SUFFRDs7T0FFRztJQUNLLGdCQUFnQjtRQUN0QixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsWUFBWSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztZQUMvQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztTQUN6QjtJQUNILENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsTUFBTSxDQUFDLEtBQWdDO1FBQ3JDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxJQUFJO1lBQUUsT0FBTztRQUNuQyxJQUFJLElBQUksQ0FBQyxhQUFhLElBQUksS0FBSyxDQUFDLElBQUksRUFBRTtZQUNwQyxJQUFJLENBQUMsV0FBVyxHQUFHLFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2pDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDdkIsQ0FBQyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUN0QjthQUFNO1lBQ0wsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUN0QjtJQUNILENBQUM7SUFFRDs7OztPQUlHO0lBQ0ssUUFBUSxDQUFDLEtBQWdDO1FBQy9DLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsQ0FBQztRQUN6QyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZCxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUM1QjtJQUNILENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsU0FBUyxDQUFDLEtBQWdDO1FBQ3hDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDM0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFDdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsU0FBUyxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQzlDLENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJhc2VBY3RvciB9IGZyb20gJy4vYmFzZS1hY3Rvcic7XG5pbXBvcnQgeyBBcHBlYXJFdmVudCwgSUxhenlBY3RvciB9IGZyb20gJy4uL2NvbW1vbi90eXBlcyc7XG5cbi8qKlxuICogU3RhZ2Ug7JeQIOuTseuhneuQoCBBY3Rvci5cbiAqIOyKpO2FjOydtOyngOyXkCDsp4TsnoXsnYQg7ZWc67KI66eMIOqwkOyngO2VmOuQmCwg7KeE7J6FIO2bhCDrhIjrrLQg67mg66W06rKMIOydtO2DiOyLnOyXkOuKlCDqsJDsp4Ag7LKY66as66W8IO2VmOyngCDslYrripQg64qQ66awIOqwkOyngO2YlS5cbiAqICjsgqzsmqkg7JiIOiDstJjstJjtlZwg7IOB7ZKIIOuqqeuhneqzvCDqsJnsnbQg67mg66W06rKMIOyKpO2BrOuhpCDtlZjsl6wg7KeA64KY7LmgIOyImCDsnojripQg6rOzKVxuICogQGNsYXNzIExhenlBY3RvclxuICogQGV4dGVuZHMge0Jhc2VBY3Rvcn1cbiAqL1xuZXhwb3J0IGNsYXNzIExhenlBY3RvciBleHRlbmRzIEJhc2VBY3RvciBpbXBsZW1lbnRzIElMYXp5QWN0b3Ige1xuICBwcml2YXRlIGFwcGVhclRpbWVyOiBhbnkgPSBudWxsO1xuICBwcml2YXRlIGNoZWNrb3V0RGVsYXk6IG51bWJlciA9IDEwMDA7XG4gIHByaXZhdGUgYXBwZWFyRGVsYXk6IG51bWJlciA9IDE1MDtcblxuICAvKipcbiAgICog64qQ66awIOqwkOyngOulvCDsi5zsnpHtlZjquLAg7KCEIOuMgOq4sCDsi5zqsIQuXG4gICAqIOyngOygleuQnCDsi5zqsIQg7KCE7JeQIOqwkOyngOuQnCDsp4TsnoXsnYAg64qQ66awIOqwkOyngOulvCDtlZjsp4Ag7JWK6rOgIOuwlOuhnCDsp4TsnoXsnYQg7JWM66a8LlxuICAgKiBAcGFyYW0gW2RlbGF5PTEwMDBdXG4gICAqL1xuICBzZXRDaGVja291dERlbGF5KGRlbGF5OiBudW1iZXIgPSAxMDAwKSB7XG4gICAgdGhpcy5jaGVja291dERlbGF5ID0gZGVsYXk7XG4gIH1cblxuICAvKipcbiAgICog7KeA7KCV65CcIOyLnOqwhCDsgqzsnbTsl5Ag7KeE7J6FIO2bhCDsp4TstpzsnYQg7ZWY64qUIOqyveyasCDsp4TsnoUg7JWM66a87J2EIO2VmOyngCDslYrripQg64yA6riwIOyLnOqwhC5cbiAgICogQHBhcmFtIFtkZWxheT0xNTBdXG4gICAqL1xuICBzZXRBcHBlYXJEZWxheShkZWxheTogbnVtYmVyID0gMTUwKSB7XG4gICAgdGhpcy5hcHBlYXJEZWxheSA9IGRlbGF5O1xuICB9XG5cbiAgLyoqXG4gICAqIOynhOyehSDrjIDquLAg7YOA7J2066i4IO2MjOq4sFxuICAgKi9cbiAgcHJpdmF0ZSBjbGVhckFwcGVhclRpbWVyKCkge1xuICAgIGlmICh0aGlzLmFwcGVhclRpbWVyKSB7XG4gICAgICBjbGVhclRpbWVvdXQodGhpcy5hcHBlYXJUaW1lcik7XG4gICAgICB0aGlzLmFwcGVhclRpbWVyID0gbnVsbDtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICog7Iqk7YWM7J207KeAIOynhOyehS4g7KeE7J6FIO2bhCDsnbzsoJXsi5zqsIQgKGFwcGVhckRlbGF5KSDsoITsl5Ag7J207YOI7ZWY64qUIOqyveyasOuKlCDsp4TsnoXsnLzroZwg7Leo6riJ7ZWY7KeAIOyViuydjC5cbiAgICogQG92ZXJyaWRlXG4gICAqIEBwYXJhbSBbZW50cnldXG4gICAqL1xuICBhcHBlYXIoZW50cnk6IEludGVyc2VjdGlvbk9ic2VydmVyRW50cnkpIHtcbiAgICB0aGlzLmNsZWFyQXBwZWFyVGltZXIoKTtcbiAgICBpZiAodGhpcy5pc0FwcGVhciA9PT0gdHJ1ZSkgcmV0dXJuO1xuICAgIGlmICh0aGlzLmNoZWNrb3V0RGVsYXkgPD0gZW50cnkudGltZSkge1xuICAgICAgdGhpcy5hcHBlYXJUaW1lciA9IHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICB0aGlzLmRvQXBwZWFyKGVudHJ5KTtcbiAgICAgIH0sIHRoaXMuYXBwZWFyRGVsYXkpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmRvQXBwZWFyKGVudHJ5KTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICog7Iuk7KCcIOynhOyehSDsspjrpqwuXG4gICAqIEBwcml2YXRlXG4gICAqIEBwYXJhbSBlbnRyeVxuICAgKi9cbiAgcHJpdmF0ZSBkb0FwcGVhcihlbnRyeTogSW50ZXJzZWN0aW9uT2JzZXJ2ZXJFbnRyeSkge1xuICAgIHRoaXMuaXNBcHBlYXIgPSB0cnVlO1xuICAgIHRoaXMuZGlzcGF0Y2goQXBwZWFyRXZlbnQuQVBQRUFSLCBlbnRyeSk7XG4gICAgaWYgKHRoaXMuc3RhZ2UpIHtcbiAgICAgIHRoaXMuc3RhZ2UudW5vYnNlcnZlKHRoaXMpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiDsiqTthYzsnbTsp4Ag7J207YOILlxuICAgKiBAb3ZlcnJpZGVcbiAgICogQHBhcmFtIGVudHJ5XG4gICAqL1xuICBkaXNhcHBlYXIoZW50cnk6IEludGVyc2VjdGlvbk9ic2VydmVyRW50cnkpIHtcbiAgICB0aGlzLmNsZWFyQXBwZWFyVGltZXIoKTtcbiAgICBpZiAoIXRoaXMuaXNBcHBlYXIpIHJldHVybjtcbiAgICB0aGlzLmlzQXBwZWFyID0gZmFsc2U7XG4gICAgdGhpcy5kaXNwYXRjaChBcHBlYXJFdmVudC5ESVNBUFBFQVIsIGVudHJ5KTtcbiAgfVxufVxuIl19