JavaScript 系列--JavaScript一些奇淫技能的完成要领（一）简短的sleep函数，猎取时候戳

2024年1月17日 194次阅读 来源: saucxs

一、媒介

有些东西很好用，然则你未必晓得；有些东西你可以用过，然则你未必晓得道理。
完成一个目标有多种门路，俗语说，条条大路通罗马。发散一下人人的头脑以及拓展一下知识面。

二、完成一个简短的sleep函数

sleep函数重要用来做耽误实行的，许多编程言语都有sleep函数，然则javascript没有这个函数，我们完成一下：

1、简朴版本

function sleep(sleepTime){
    for(var start = +new Date;+new Date - start<sleepTime;){}
}
var t1 =  +new Date();
sleep(3000);
var t2 = +new Date();
console.log(t2-t1);

长处：简朴粗犷，通俗易懂。

瑕玷：确切sleep了，然则卡死了，cpu会飙升，精确度不准

2、promise版本

// promise版本
function sleep(sleepTime){
    return new Promise(resolve => setTimeout(resolve,sleepTime));
}
var t1 = +new Date();
sleep(3000).then(()=>{
    var t2 = +new Date();
    console.log(t2-t1);
})

长处：实际上用了setTimeout，没有构成历程壅塞，不会形成机能和负载题目。

瑕玷：虽然处置惩罚了回调函数的嵌套，然则照样不美观，而且异步不完全，历程当中住手实行。

3、generator版本

// generotor版本
function sleep(sleepTime){
    return function(cb){
        setTimeout(cb.bind(this), sleepTime);
    }
}
function* genSleep(){
    var t1 = +new Date();
    yield sleep(3000);
    var t2 = +new Date();
    console.log(t2-t1);
}
async(genSleep);
function async(gen){
    const iter = gen();
    function nextStep(it){
        if(it.done) return ;
        if (typeof it.value === "function") {
            it.value(function(ret) {
              nextStep(iter.next(ret))
            })
        } else {
            nextStep(iter.next(it.value));
        }
    }
    nextStep(iter.next());
}

长处：跟promise一样长处，代码变得更简朴清洁。

瑕玷：就是每次都要实行 next() 显得很贫苦，虽然有 co（第三方包）可以处置惩罚，但就多包了一层，不好看，毛病也必需按 co 的逻辑来处置惩罚，不爽。

co 之所以这么火并不是没有缘由的，固然不是仅仅完成 sleep 这么无聊的事变，而是它活生生的藉著generator/yield 完成了很相似 async/await 的结果！这一点真是让我三观尽毁另眼相看。

const co = require("co")
function sleep(sleepTime) {
  return function(cb) {
    setTimeout(cb.bind(this), sleepTime)
  }
}

co(function*() {
  const t1 = +new Date()
  yield sleep(3000)
  const t2 = +new Date()
  console.log(t2 - t1)
})

4、async/await版本

function sleep(delay) {
  return new Promise(reslove => {
    setTimeout(reslove, delay)
  })
}

!async function test() {
  const t1 = +new Date()
  await sleep(3000)
  const t2 = +new Date()
  console.log(t2 - t1)
}()

长处：同 Promise 和 Generator 长处。 Async/Await 可以看作是 Generator 的语法糖，Async 和 Await 相较于 * 和 yield 越发语义，别的各个函数都是扁平的，不会发生过剩的嵌套，代码越发清新易读。

瑕玷：ES7 语法存在兼容性题目，有 babel 统统兼容性都不是题目

5、开源的版本

在 javascript 文雅的写 sleep 即是怎样文雅的不文雅，这里有 C++ 完成的模块：https://github.com/ErikDubbel…

const sleep = require("sleep")

const t1 = +new Date()
sleep.msleep(3000)
const t2 = +new Date()
console.log(t2 - t1)

长处：可以完成越发邃密的时候精确度，而且看起来就是真的 sleep 函数，清楚直白。
瑕玷：瑕玷须要装置这个模块node-sleep。

前端知识点：Async/Await是现在前端异步誊写最文雅的一种体式格局

二、文雅猎取时候戳

上面完成 sleep 函数，我们可以发明代码有 +new Date()猎取时候戳的用法，这只是个中的一种，下面就说一下其他两种以及 +new Date()的道理。

1、一般版

var timestamp=new Date().getTime()

长处：具有普遍性，人人都用这个
瑕玷：应当没有吧

2、进阶版

var timestamp = (new Date()).valueOf()

valueOf 要领返回对象的原始值(Primitive,’Null’,’Undefined’,’String’,’Boolean’,’Number’五种基础数据范例之一)，多是字符串、数值或 bool 值等，看详细的对象。

长处：说明开发者原始值有一个详细的认知，让人眼前一亮。
瑕玷: 应当没有吧

3、Date.now()要领

Date.now()

Date.now() 要领返回自1970年1月1日 00:00:00 UTC到当前时候的毫秒数。范例为Number。由于 now() 是Date的一个静态函数，所以必需以 Date.now() 的情势来运用。

长处：简朴明了。

瑕玷：兼容性题目，ECMA-262 第五版中被标准化。

兼容性不支持时的兼容性代码：

if (!Date.now) {
  Date.now = function now() {
    return new Date().getTime();
  };
}

4、终极版

var timestamp = +new Date()

长处：对 JavaScript 隐式转换控制的比较稳固的一个表现
瑕玷：应当没有吧

我们来剖析一下，为何+new Date()拿到的时候戳？

那就是隐式转换，实质上照样挪用了valueOf()的要领。

注重：

（1）一元+ 运算符

一元 + 运算符将其操作数转换为 Number 范例并反转其正负。注重负的 +0 发生 -0，负的 -0 发生 +0。

+new Date() 相当于 ToNumber(new Date())

（2）toString 用来返回对象的字符串示意。

var obj = {};
console.log(obj.toString());//[object Object]

var arr = [];
console.log(arr.toString());//""空字符串

var date = new Date();        // Tue May 28 2019 22:05:58 GMT+0800 (中国标准时候)
console.log(date.toString());//"Tue May 28 2019 22:05:58 GMT+0800 (中国标准时候)"

（3）valueOf()要领返回对象的原始值

valueOf()要领返回对象的原始值，多是字符串，述职或boolean值，看详细的对象。

var obj = {
  name: "saucxs"
}
console.log(obj.valueOf()) //Object {name: "saucxs"}

var arr1 = [1,3]
console.log(arr1.valueOf()) //[1,3]

var date = new Date()
console.log(date.valueOf())//1456638436303

// 如代码所示，三个差别的对象实例挪用valueOf返回差别的数据
原始值指的是 ‘Null’,’Undefined’,’String’,’Boolean’,’Number’,’Symbol’ 6种基础数据范例之一，上面已提到过这个观点，这里再次说明一下。

末了剖析一下个中的历程：+new Date():

(1)运算符 new 的优先级高于一元运算符 +，所以历程可以剖析为：var time=new Date();+time

(2)依据上面提到的划定规矩相当于：ToNumber(time)

(3)time 是个日期对象，依据 ToNumber 的转换划定规矩，所以相当于：ToNumber(ToPrimitive(time))

(4)依据 ToPrimitive 的转换划定规矩：ToNumber(time.valueOf())，time.valueOf() 就是 原始值 获得的是个时候戳，假定 time.valueOf()=1503479124652

(5)所以 ToNumber(1503479124652) 返回值是 1503479124652 这个数字。

前端知识点：隐式转换的妙用

【注：我是saucxs，也叫songEagle，松宝写代码，文章首发于sau交流学习社区（https://www.mwcxs.top），关注我们天天浏览更多精彩内容】

    原文作者：saucxs
    原文地址: https://segmentfault.com/a/1190000019351599
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞