Vue -检查用户是否处于脱机状态，然后在用户重新联机后显示一秒钟的div
Vue -检查用户是否处于脱机状态，然后在用户重新联机后显示一秒钟的div
提问于 2018-08-05 05:39:56
我目前在一个定时循环上使用一个函数来检查用户是否离线：
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);
}
},
},除了使用专用的notify插件之外，还有比观察者更好的方法来实现这一点吗？
回答 2
Stack Overflow用户
发布于 2018-08-05 10:35:53
有没有办法不用计时器就能检测出来？有，。通过使用online offline事件。
除了使用专用的notify插件之外，还有比观察者更好的方法来实现这一点吗？我认为观察者是这里最合适的方法。
演示：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);
}
})Stack Overflow用户
发布于 2021-05-23 03:52:51
你可以处理这个(更新onLine状态)，只需在事件监听器中设置箭头函数，并由监听器设置变量true/false即可。
data() {
return {
isOnLine:navigator.onLine
}
},
mounted() {
window.addEventListener('online', ()=>{this.isOnLine=true});
window.addEventListener('offline', ()=>{this.isOnLine=false});
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51689739
复制相关文章
相似问题
腾讯云开发者
