vue监听localstorage变化_vue解决setTimeout在浏览器切换时加速的问题

在这里我们需要用到以下三个知识点：

• document.onvisibilitychange ：

只要页面发生变化，不管是切换到其他的页面还是把浏览器缩小，都会触发这个事件。

• document.hidden

这个是指当页面不是当前页面时为true，否则为false

• document.visibilityState:

这个属性有四个值，分为是：visible，hidden，prerender，unloaded
visible 表示当前网页是可见或者是部分可见的。
hidden：当前网页是不可见的
prerender 网页内容被预渲染并且用户不可见
unloaded 如果文档被卸载，那么这个值将被返回

    mounted() {
        document.addEventListener('visibilitychange', this.handleVisiable)
    },
    destroyed() {  
        document.removeEventListener('visibilitychange', this.handleVisiable)  
    },
    methods: {
        qrcode_img(code){
            let _this=this;
             //处理请求或事件

            this.qrcodeImgSetTimeout=setTimeout(function (){
                if(document.visibilityState == 'hidden') {
                    localStorage.setItem('qrcodeImgSetTimeout',code);
                }else {
                    _this.qrcode_img(code);
                }
            },1000); 
                    
        },
        handleVisiable(e){
            if(e.target.visibilityState=='visible'){
                if(localStorage.getItem('qrcodeImgSetTimeout')){
                    this.qrcode_img(localStorage.getItem('qrcodeImgSetTimeout'))
                    localStorage.removeItem('qrcodeImgSetTimeout');
                }
            }
        }
    },

参考1：

完美解决setInterval在浏览器切换时加速的问题​juejin.im

参考2：

VUE如何监听当前页面的隐藏显示 - 的回答 - SegmentFault 思否​segmentfault.com