Vue-检查用户是否处于脱机状态，然后在他们再次在线时显示div秒钟

Question

我目前在定时循环上使用一个函数来检查用户是否下线：

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

方法：

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

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

其次...

我试图显示1秒的警报来告诉用户他们已重新联机。当this.onLine为true时，div应该被隐藏。当它为false时，它也应该被隐藏，但是当它从false变为true时，我想显示div大约一秒钟，然后再次将其隐藏。我已经尝试过使用settimeout并使用观察程序，但是均未达到预期的效果。

编辑：

因此，让我到达的一种方法是：

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

然后观察者显示返回的在线消息

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);
    }
})