美文网首页
实现倒计时模块方法

实现倒计时模块方法

作者: 星月西 | 来源:发表于2017-08-28 23:57 被阅读15次

1.实现思路

  • 参数验证
  • 二分法实现补充
  • 奇数除以二都为偶数
function leftpad(str, len, ch) {
    str = String(str);
    len = len - str.length;
    if (len <= 0) {
        return str;
    }
    if (!ch && ch !== 0) {
        ch = ' ';
    }
    ch = String(ch);

    var pad = '';
    while (true) {
        if (len & 1) {
            pad += ch;
        }
        len >>= 1;
        if (len) {
            ch += ch;
        } else {
            break;
        }
    }
    return pad + str;
}

2.实现深度拷贝

  • 关键点为需要考虑到数组和null这两个特殊的对象
  • 如果直接使用JSON.parse(JSON.stringify(obj)),则无法拷贝对象中的函数
function copy(obj){
    if(typeof obj !== 'object' || obj===null){
        return obj;
    }

    var res=Array.isArray(obj)?[]:{};
    for(var i in obj){
        res[i]=copy(obj[i]);
    }
    return res;
}

3.深入理解setInterval

设置setInterval定时器后,当要向任务队列里添加代码实例时,如果任务队列里面已经存在代码实例,则不会添加,这就会导致setInterval并不一定是准确的事件,可能会有以下情况:

  • 定时任务设置2s,任务队列被阻塞了,上一个任务延后1s执行,那么任务间隔缩短到了1s
  • 定时任务设置2s,任务队列被阻塞了,上一个任务还没完成,下一个任务不会添加,直接跳过了
setInterval(()=>console.log('red'),1000);

//定时函数
function sleep(time){
    var now=Date.now();
    while(true){
        var t=Date.now();
        if(t-now>=time){
            break;
        }
    }
}

sleep(5000);

而递归调用setTimeout则可以执行完上一个任务后,再过1s执行下一个任务,保证任务间隔会大于等于1s

4.获取服务器时间的方法

可以通过ajax获取服务器响应,从响应头部中的Date拿到服务器时间

function getNowTime(callback){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState===3){
            var now=xhr.getResponseHeader('Date');
            callback(now);
            xhr.abort();
        }
    }
    xhr.open('get','/',true);
    xhr.send(null);
}

getNowTime((now)=>{
    console.log(now);
});
  • 客户端无法获取响应中的Set-Cookie,Set-Cookie2这两个字段,无论是同域还是跨域请求
  • 对于跨域请求,客户端可以获取的字段只有与缓存和主体类型相关的字段,和Access-Control-Expose-Headers中规定的字段

相关文章

  • 实现倒计时模块方法

    1.实现思路 参数验证 二分法实现补充 奇数除以二都为偶数 2.实现深度拷贝 关键点为需要考虑到数组和null这两...

  • 小功能:三个倒计时器

    1:直接使用Timer实现倒计时~图一 2:使用Handler实现倒计时的handleMessage()方法,该方...

  • 【译】BEM CSS命名规范二 Key concepts

    原文 关键概念 模块 元素 修饰 BEM 实体 混合模式 BEM 树 模块实现 实现方法 模块重定义 重定义级别 ...

  • 前端笔记

    模块module功能集合,实现功能的方法,实现一系列功能的方法集合 插件plugin能复用的模块 组件compon...

  • node的模块加载

    模块实现 依照CommonJS的模块规范,使用require()引入模块的api,使用exports导出模块的方法...

  • js module

    1. 基本的实现方法 模块是实现特定功能的一组属性和方法的封装简单的做法是把模块写成一个对象,所有的模块成员都放到...

  • React Native 倒计时组件

    功能: 实现倒计时组件,倒计时结束可以执行方法 1、CountDown.js import React, {Com...

  • iOS 验证码倒计时

    /** 倒计时方法 在点击获取验证码按钮的方法里调用此方法即可实现, 需要在倒计时里修改按钮相关的请在此方法里yo...

  • 随记:android实现一个xx:xx:xx的倒计时

    需要实现一个倒计时的一个方法,通过这种方式进行了实现

  • JavaScript 模块

    模块 【示例】: 【解释】: 这个模式在 JavaScript 中被称为模块。最常见的实现模块模式的方法通常被称为...

网友评论

      本文标题:实现倒计时模块方法

      本文链接:https://www.haomeiwen.com/subject/plyndxtx.html