专栏首页only theone 的记录moment.js 默认使用服务器时间

moment.js 默认使用服务器时间

在前端使用Date对象获取当前时间的时候,该时间是客户端的时间。但是该时间可以被用户修改,所以我们一般情况下并不想要这个时间。如果每一次获取时间的时候都请求一下服务器,那么将会对服务器造成不必要的压力,我们也不想这么做。在网上找了一圈之后,发现了一些解决方案,就在这里总结一下

1.当系统被用户第一次打开的时候,发送请求(没必要写一个专门获取时间的API),根据http的相应头Date字段获取服务器时间。此时与客户端时间做差,并将差值记录下来。

2.为了防止客户端时间被用户修改,我们每隔2s(这个自定义吧)获取一下客户端时间,并将上一个时间和当前时间做差,看和2s差的大不大,正常情况下也就是几十毫秒的差值,我们在这里比方设为 1s。如果差值大于1s,我们就认为客户端时间被修改了,我们此时获取一下前一个时间和当前时间的差值再减去2s就是修改时候后的差值。

3.moment.js内部获取时间是使用的moment.now方法,我们把这个方法自定义一下就可以了

以下是代码实现:

    var diff = 0;           // 记录服务器和客户端的时间差值
    var lastTime;           // 记录上一次时间
    $(function(){
        $.ajax({
            url: apiURL,
        }).always(function(res, state, xhr){
            var serverTime = new Date(xhr.getResponseHeader("Date")).getTime();
            var localTime = +new Date;
            diff = serverTime - localTime;
            lastTime = localTime;
            var InvertialMillSeconds = 2000;
            var maxMillSeconds = 1000;
            // 每InvertialSeconds毫秒检测一次当前时间,
            // 若差值大于maxMillSeconds那么可以判断出客户端时间被修改了
            setTimeout(function(){
                var nowTime = +new Date;
                var InverDiff = nowTime - (lastTime + InvertialMillSeconds);
                if(Math.abs(InverDiff) > maxMillSeconds){
                    diff += InverDiff;
                }
                lastTime = nowTime;
                setTimeout(arguments.callee, InvertialMillSeconds);
            }, InvertialMillSeconds);
        })
        
    })

moment.now本来是这个样子的

    var now = function() {
        return Date.now ? Date.now() : +(new Date());
    };

我们在引入moment.js之后,重新修改该值为

    if (window.moment && window.moment.now) {
        moment.now = function(){
            return Date.now ? Date.now()+top.diff : (new Date().getTime() + top.diff);
        }
    }

到此,大功告成!

本文由博客一文多发平台 OpenWrite 发布!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【译】为什么说学习Javascript是个好主意的5个原因

    Javascript的学习曲线是很平滑的。它是一门对初学者友好的编程语言,每个人都可以无经验地开始学习它。考虑到Javascript主要集中在前端开发和用户界面...

    嘉明
  • C#反射原理解析

    需要using System.Reflection; Assembly的组成

    bering
  • 手把手教你搭建基于 webpack4 的 vue2 多页应用

    前司和现司都会存在这种业务场景:有很多 H5 页面是不相关的,如果使用 SPA 的话,对于很多落地页和活动页不太友好,有一些纯前端页面加载过慢,所以就萌生了创建...

    石燕平
  • 数据库 ID 生成方案:百度 UidGenerator

    UidGenerator 是用 Java 语言实现的基于 Snowflake 算法的唯一 ID 生成器。

    happyJared
  • UnityShader实例06:UV动画

    UV动画,顾名思义,就是针对UV做的动画。在游戏中,一些动态水面,飞流直下的瀑布,流动的岩浆,跳动的火焰等等,很多都是通过操作UV做的动画。在unity中我可...

    bering
  • 前端进阶必须知道的正则表达式知识

    正则表达式(Regular Expression) 是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个规则字符串,这个...

    石燕平
  • 开源日志框架的原理与分析

    日志用于记录系统中硬件,软件,系统,进程和应用运行时的信息,同时可以监控系统中发生的各种事件,我们可以用它检查发生错误的原因,找到攻击者留下的攻...

    疯狂的KK
  • 使用HTML和CSS编写无JavaScript的Todo应用

    用css实现一个todo应用程序,但不是TodoMVC那样的设计,它不使用JavaScript,而是所有的交互都是由CSS驱动的。

    IMWeb前端团队
  • 前端 100 问:能搞懂80%的请把简历给我

    在 2019 年 1 月 21 日这天,「壹题」项目正式开始,在这之后每个工作日都会出一道高频面试题,主要涵盖阿里、腾讯、头条、百度、网易等大公司和常见题型。得...

    石燕平
  • 送你43道JavaScript面试题

    这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了,项目中记录了一些JavaScr...

    石燕平

扫码关注云+社区

领取腾讯云代金券