頁(yè)面可見(jiàn)與不可見(jiàn)的事件——visibilitychange

libxd 發(fā)布于2019-08-23 18:40 / 678人閱讀

摘要：需求背景在最近的項(xiàng)目中，使用了和定時(shí)器實(shí)現(xiàn)了隨機(jī)走動(dòng)物體的功能，走動(dòng)的物體還會(huì)有的動(dòng)畫(huà)。上述代碼中，維護(hù)了兩個(gè)數(shù)組，分別代表頁(yè)面進(jìn)入可見(jiàn)狀態(tài)時(shí)需要執(zhí)行的回調(diào)列表和進(jìn)入不可見(jiàn)狀態(tài)時(shí)需要執(zhí)行的回調(diào)列表。

需求背景

在最近的項(xiàng)目中，使用了transition和定時(shí)器實(shí)現(xiàn)了隨機(jī)走動(dòng)物體的功能，走動(dòng)的物體還會(huì)有animation的動(dòng)畫(huà)。我發(fā)現(xiàn)在手機(jī)中，按home鍵或者切換應(yīng)用，使頁(yè)面不在屏幕中，也就是頁(yè)面不可見(jiàn)，過(guò)一段時(shí)間切回來(lái)，會(huì)出現(xiàn)物體移動(dòng)但是沒(méi)有播放animaiton的動(dòng)畫(huà)的情況。

我就想到了visibilitychange。

結(jié)合react使用，添加類似onShow/onHide生命周期 額外生命周期

瀏覽器document有個(gè)visibilitychange的事件，由于存在兼容性問(wèn)題，所以代碼里也做了兼容處理。該事件會(huì)在document.visibilityState發(fā)生變化時(shí)觸發(fā)，visibilityState有兩個(gè)狀態(tài)值——visible和hidden，表示頁(yè)面是否在屏幕當(dāng)中。

let changeState;
let visibilityChange;

if (typeof document.hidden !== "undefined") {
    visibilityChange = "visibilitychange";
    changeState = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
    visibilityChange = "mozvisibilitychange";
    changeState = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
    visibilityChange = "msvisibilitychange";
    changeState = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
    visibilityChange = "webkitvisibilitychange";
    changeState = "webkitVisibilityState";
}

知道了當(dāng)前瀏覽器的狀態(tài)屬性和事件名稱后，就可以添加時(shí)間監(jiān)聽(tīng)了。

const visibleCallbackList = [];
const hiddenCallbackList = [];

document.addEventListener(
    visibilityChange,
    () => {
        if (document[changeState] === "visible") {
            for (let i = 0; i < visibleCallbackList.length; i++) {
                if (typeof visibleCallbackList[i] === "function") {
                    visibleCallbackList[i]();
                }
            }
        } else if (document[changeState] === "hidden") {
            for (let i = 0; i < hiddenCallbackList.length; i++) {
                if (typeof hiddenCallbackList[i] === "function") {
                    hiddenCallbackList[i]();
                }
            }
        }
    },
    false
);

上述代碼中，維護(hù)了兩個(gè)數(shù)組，分別代表頁(yè)面進(jìn)入可見(jiàn)狀態(tài)時(shí)需要執(zhí)行的回調(diào)列表和進(jìn)入不可見(jiàn)狀態(tài)時(shí)需要執(zhí)行的回調(diào)列表。這兩個(gè)列表在下面會(huì)講到。

因?yàn)槲覀兪鞘褂胷eact開(kāi)發(fā)，所以想在組件級(jí)別做到該組件是否能使用該功能，所以想到讓組件具有類似小程序的onShow和onHide的生命周期，在這個(gè)生命周期中執(zhí)行組件內(nèi)部的邏輯。

export const h5OnShow = callback => {
    visibleCallbackList.push(callback);
};

export const h5OnHide = callback => {
    hiddenCallbackList.push(callback);
};

/**
 *
 * @param {Object}
 *   {Function} h5OnShowCallback h5需要注銷的顯示回調(diào)
 *   {Function} h5OnHideCallback h5需要注銷的隱藏回調(diào)
 */
export const h5ExtraLifecycleWillUnmount = ({ h5OnShowCallback, h5OnHideCallback }) => {
    if (h5OnShowCallback) {
        visibleCallbackList.splice(visibleCallbackList.indexOf(h5OnShowCallback), 1);
    }
    if (h5OnHideCallback) {
        hiddenCallbackList.splice(hiddenCallbackList.indexOf(h5OnHideCallback), 1);
    }

};

如上述代碼中，h5OnShow方法中將傳入的callback push至visibleCallbackList數(shù)組，h5OnHide方法將callback push到hiddenCallbackList。
h5ExtraLifecycleWillUnmount是在組件即將要卸載的時(shí)候調(diào)用，將回調(diào)列表里的方法刪除。

額外生命周期的使用

    componentDidMount() {
        h5OnShow(this.pageShow);
        h5OnHide(this.pageHide);
    }
    componentWillUnmount() {
        h5ExtraLifecycleWillUnmount({
            h5OnShowCallback: this.pageShow,
            h5OnHideCallback: this.pageHide
        });
    }
    pageShow = () => {
        // 開(kāi)啟隨機(jī)走動(dòng)定時(shí)器
    }
    pageHide = () => {
        // 關(guān)閉隨機(jī)走動(dòng)定時(shí)器
    }

在組件里，注冊(cè)onSHow和onHide，在頁(yè)面顯示時(shí)開(kāi)啟定時(shí)器，在頁(yè)面隱藏時(shí)關(guān)閉定時(shí)器并把transition設(shè)置為none，這樣在頁(yè)面不可見(jiàn)時(shí)不會(huì)做無(wú)用的邏輯處理，這也是符合用戶的預(yù)期，因?yàn)轫?yè)面隱藏時(shí)并不關(guān)心在這期間做了生命動(dòng)畫(huà)變更。

可優(yōu)化點(diǎn)：
1.visibleCallbackList和hiddenCallbackList使用WeakSet更好，保證了不會(huì)出現(xiàn)內(nèi)存泄漏。
2.如果組件實(shí)例化多次，pageShow和pageHide使用箭頭函數(shù)并不友好，可使用修飾器模式改變?cè)蜕系姆椒ǖ膖his指向。