javascript - Vue - 检查用户是否离线，然后在他们恢复在线后显示一秒钟的 div

Question

我目前正在定时循环中使用一个函数来检查用户是否离线:

created() {
   setInterval(() => {
        this.checkOnline();
   }, 30000);
}

方法:

checkOnline(){
   this.onLine = navigator.onLine ? true : false;
}

有没有一种方法可以在不使用计时器的情况下检测到这一点？

其次...

我正在尝试显示一个 1 秒的警报，告诉用户他们已恢复在线。当 this.onLine 为真时，div 应该被隐藏。当它为 false 时，它​​也应该被隐藏，但是当它从 false 变为 true 时，我想显示 div 一秒钟左右，然后再次隐藏它。我已经尝试过使用 settimeout 和观察器，但都没有达到预期的效果。

编辑:

所以让我到达那里的一种方法是:

 data() {
     return {
         onLine: navigator.onLine ? true : false,
     }
 }

然后一个watcher显示回在线消息

watch: {
    onLine: function (val) {
        if(this.onLine === true){
            this.showBackOnline = true;
            setTimeout(()=>{ this.showBackOnline = false; }, 1000);
        }
    },
},

除了使用专用的通知插件之外，是否有比观察者更好的方法来实现这一目标？

Answer 1

有没有一种方法可以在不使用计时器的情况下检测到这一点？ 是的。通过使用线上线下事件。

除了使用专用的通知插件之外，还有比观察者更好的方法来实现这一点吗？我认为观察者是最合适的方法。

演示:https://jsfiddle.net/jacobgoh101/xz6e3705/4/

new Vue({
    el: "#app",
    data: {
        onLine: navigator.onLine,
        showBackOnline: false
    },
    methods: {
        updateOnlineStatus(e) {
            const {
                type
            } = e;
            this.onLine = type === 'online';
        }
    },
    watch: {
        onLine(v) {
            if (v) {
                this.showBackOnline = true;
                setTimeout(() => {
                    this.showBackOnline = false;
                }, 1000);
            }
        }
    },
    mounted() {
        window.addEventListener('online', this.updateOnlineStatus);
        window.addEventListener('offline', this.updateOnlineStatus);
    },
    beforeDestroy() {
        window.removeEventListener('online', this.updateOnlineStatus);
        window.removeEventListener('offline', this.updateOnlineStatus);
    }
})