倒计时抢购案例实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、倒计时抢购案例（利用ajax）

1-1思路

/*

• 两个时间：
• • 目标时间 18:00:00
• • 当前时间
• 目标时间-当前时间=时间差 「毫秒差：计算时间差中包含多少小时，多少分钟，多少秒」
• 每间隔一秒中都需要重新获取当前时间「定时器 setInterval」，重算时间差等
• 核心的问题：
• 当前时间是不可以获取客户端本地的（因为本地的时间客户自己可以肆意的修改），需要统一获取服务器的时间「响应头->Date」
• • 获取服务器时间会存在时间偏差问题 --> HEAD AJAX状态码为2
• 在页面不刷新的情况下，每间隔1秒，不是再次从服务器获取（如果这样：服务器会崩溃，用户得到的时间误差也会越大…），而是基于第一次获取的结果之上，手动给其累加1000ms即可
  */

1-2 具体实现

let countdownModule = (function () {
   
    let textBox = document.querySelector('.text'),
        serverTime = 0,
        targetTime = +new Date('2020/12/05 16:00:00'),
        timer = null;

    // 获取服务器时间
    const queryServerTime = function queryServerTime() {
   
        return new Promise(resolve => {
   
            let xhr = new XMLHttpRequest;
            xhr.open('HEAD', '/');
        /*       
            HEAD方法和GET方法一样，知识不返回豹纹的主体部分，用于确认URI的有效性及资源更新的日期时间等。
            具体来说：1、判断类型； 2、查看响应中的状态码，看对象是否存在（响应：请求执行成功了，但无数据返回）； 3、测试资源是否被修改过
            HEAD方法和GET方法的区别： GET方法有实体，HEAD方法无实体。 
        */
        xhr.onreadystatechange = () => {
   
                if ((xhr.status >= 200 && xhr.status < 300) && xhr.readyState === 2) {