浏览器失去焦点 setTimeout() 不正确

起因

目前使用页面中，需实现倒计时自动刷新更新数据，使用 setTimeout()，如果页面一直停留没有问题，如果切换浏览器选项卡切换到其他页面停留，再切换回来，时间不准确

原始代码

       var app = new Vue({
            el: '#app',
            data: {
                oldRefreshTime: 100
            }
        })
        MainRefreshData()
        function MainRefreshData() {
            if (app.oldRefreshTime == 0) {
                //清空自动刷新，防止越来越快
                clearTimeout(refreshD);
                app.oldRefreshTime = 100;
                MainRefreshData();
            } else {
                refreshD = setTimeout(function () {
                    app.oldRefreshTime--;
                    MainRefreshData();
                }, 1000);
            }
        }

问题分析

浏览器选项卡切换后，会自动降低执行频率以提升性能

解决思路

考虑最小改动解决问题，即浏览器切换回来后，会继续执行定时器，如果使用当前时间对比开始计算时间实时计算倒计时即可

修改后代码

       var app = new Vue({
            el: '#app',
            data: {
                oldRefreshTime: 100,
                startTime: new Date(),
                endTime: new Date()
            },
            computed: {
                // 计算属性的 getter
                newRefreshTime: function () {
                    if (parseInt((this.endTime - this.startTime) / 1000) >= 100)
                    {
                        this.startTime = new Date()
                    }
                    return 100 - parseInt((new Date() - this.startTime) / 1000)
                }
            }
        })
        MainRefreshData()
        function MainRefreshData() {
            if (app.newRefreshTime == 0) {
                //清空自动刷新，防止越来越快
                clearTimeout(refreshD);
                app.oldRefreshTime = 100;
            }
            refreshD = setTimeout(function () {
                app.oldRefreshTime--;
                //触发计算属性
                app.endTime = new Date();
                MainRefreshData();
            }, 1000);
        }

实现效果

参考
JS倒计时效果，切换网页后倒计时时间错误
浏览器选项卡切换后计时器的问题

源码

SetTimeout.html