当前位置：文江博客话题详情

JavaScript HTML 微信开发 Vue.js WebApp

webapp js倒计时问题

发布于 2022-09-04 21:56:56 字数 491 浏览 13 评论 0

现在遇到这么一个问题：

对于webapp 有一个活动列表，列表里每个活动有一个倒计时，
一旦把app切入后台，js 计时器就不在生效了，导致倒计时不准确，
有想过解决方法，监听visibilitychange事件，观察document.visibilityState

想做出一个组件或者函数，能把页面上所有的倒计时问题解决，
但是思路卡主了，不知道各路大神么有没有什么好的想法、解决方案，或者资料？
谢谢!

问题补充：

我在手机调试定时器的时候，分别在微信里和手机默认浏览器里打开同一页面，
分别切换到后台，发现微信里的页面定时器任然运行，默认浏览器的中止运行了。
在手机默认浏览器里打印 document.visibilityState 是undefined，但是网页运行在微信里的话就能正常打印。

请问是为什么？微信有做什么处理么？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

梦幻之岛 2022-09-11 21:56:56

与手机系统时间进行比较；
如果还不放心，在app 打开的时候与后端的系统时间进行比较。

伪装你 2022-09-11 21:56:56

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in items">
                <com1 :value="item.time"></com1>
            </li>
        </ul>
    </div>

    <script src="https://cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
    <script src="http://cdn.bootcss.com/rxjs/5.2.0/Rx.min.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.1.0/vue.min.js"></script>

    <script>
        const source = Rx.Observable.interval(1000);

        Vue.component('com1', {
            props: ['value'],
            data() {
                return {
                    count: null,
                }
            },
            created() {
                source.subscribe(count => this.count = count % 2);
            },
            template: '<div>距离 {{ value | date("HH:mm:ss") }} 还有 {{ seconds }}s</div>',
            computed: {
                seconds() {
                    this.count;
                    return Math.abs(moment().diff(this.value, 'seconds'));
                }
            },
            filters: {
                date(val, format) {
                    if (val) return moment(val).format(format || 'YYYY-MM-DD HH:mm:ss')
                    return val
                }
            }
        });

        new Vue({
            el: '#app',
            data() {
                return {
                    items: []
                }
            },
            created() {
                for (var i = 0; i < 10; i++) {
                    this.items.push({
                        time: moment().add(i + 1, 'hours')
                    })
                }
            }
        })
    </script>
</body>
</html>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

離殇

文章 0 评论 0

小姐丶请自重

文章 0 评论 0

Aik

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

猥琐帝

文章 0 评论 0

半仙

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文