引入：https://www.html.cn/archives/6103

考試系統的專案，頁面需要做個定時器，考試結束前五分鐘彈窗提示考試即將結束，考試時間到自動交卷

一、碰到的問題

　　1）因為考生可以搜尋答案，所以考試頁面可能會被最小化，或者在考試頁面旁邊新開一個視窗，鑑於瀏覽器的保護資源機制，頁面在最小化或者不可見時資源會被釋放，js指令碼不會執行，windows系統可見定時器不走或者走得慢，蘋果瀏覽器js停止

二、解決方法

　　使用visibilitychange事件，監聽頁面是在前臺還是後臺，進入後臺清除定時器，進入前臺啟動定時器。

　　visibilitychange事件有相容性問題，以下程式碼為相容處理，自測谷歌，360，ie11沒有問題

function getHiddenProp() {
        var prefixes = ['webkit', 'moz', 'ms', 'o'];

        // if 'hidden' is natively supported just return it
        if ('hidden' in document) return 'hidden';

        // otherwise loop over all the known prefixes until we find one
        for (var i = 0; i < prefixes.length; i++) {
            if ((prefixes[i] + 'Hidden') in document)
                return prefixes[i] + 'Hidden';
        }

        // otherwise it's not supported
        return null;
    }
function getVisibilityState() {
    var prefixes = ['webkit', 'moz', 'ms', 'o'];
    if ('visibilityState' in document) return 'visibilityState';
    for (var i = 0; i < prefixes.length; i++) {
        if ((prefixes[i] + 'VisibilityState') in document)
            return prefixes[i] + 'VisibilityState';
    }
    // otherwise it's not supported
    return null;
}

function isHidden() {
       var prop = getHiddenProp();
        if (!prop) return false;

        return document[prop];
}

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
    var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
    document.addEventListener(evtname, function () {
		console.log(document[getVisibilityState()])
        // document.title = document[getVisibilityState()]+"狀態";
    },false);
}