JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳

一、前言有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。实现一个目的有多种途径,俗话说,条条大路通罗马。发散一下大家的思维以及拓展一下知识面。二、实现一个简短的sleep函数sleep函数主要用来做延迟执行的,很多编程语言都有sleep函数,但是javascript没有这个函数,我们实现一下:1、简单版本functionsleep(sleepTime){for(varsta...

一、前言

有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。
实现一个目的有多种途径,俗话说,条条大路通罗马。发散一下大家的思维以及拓展一下知识面。

二、实现一个简短的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/ErikDubbelboer/node-sleep

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()

优点:具有普遍性,大家都用这个

源文地址:https://www.guoxiongfei.cn/cntech/18353.html