专栏首页方球摸鱼写一个TS 秒表计时类

摸鱼写一个TS 秒表计时类

目标

类似手机秒表功能,调用记录api,记录当前时间戳。 可获取一段或多段时间间隔,可获取跨时段间隔。

使用

// 时间格式化
import dayjs from 'dayjs'

// 延时
function delay(time:number, callback?:Function) {
  return new Promise((reslove) => {
    setTimeout(() => {
      reslove(callback ? callback() : undefined)
    }, time * 1000)
  }) 
}


async function run() {
  
  const c = new Clock()

  c.tick()
  await delay(1)
  c.tick()
  await delay(3)
  c.tick()
  await delay(10)
  c.tick()

  let t = c.nextTick()
  while (t !== Clock.END) {
    // 遍历获取每段时间间隔
    console.log(t as number / 1000)
    t = c.nextTick()
  }
  
  // 1.016
  // 3.013
  // 10.018
  
  // 格式输出每个时间记录点
  c._getTimes().forEach(i => {
    dayjs(new Date(i)).format('YYYY/MM/DD HH:mm:ss')
  }) 
}

run()

源码实现

/**
 * 计时器
 * @summary 
 * 记录一段或多段时间间隔
 */
export class Clock{

 // 迭代器终止标识
 static END = 'END'

// 工厂函数
 static create() {
   return new Clock()
 }

  private _times:number[] = []
  private _currentTick: number = 0
  
  // 获取记录列表
  _getTimes() {
    return [...this._times]
  }
  
  /**
   * 打点记录
   */
  tick() {
    this._times.push((new Date()).getTime())      
  }

  /**
   * 清空记录
   */
  clean() {
    this._times = []
  }
  
  /**
   * 记录条数
   * @returns number
   */
  len() {
    return this._times.length
  }

  /**
   * 获取记录间隔
   * @param start 
   * @param end 
   * @returns 
   */
  getTick(start:number, end: number) {
    const startTime = this._times[start]
    const endTime = this._times[end]
    if (!startTime || !endTime) {
      throw new Error(`查询越界: ${start} - ${end}`)
    }
    return endTime - startTime
  }

  /**
   * 最后一条间隔
   * @returns number
   */
  lastTick() {
    return this.getTick(this._times.length - 2, this._times.length - 1)
  }

  /**
   * 第一条间隔
   * @returns number
   */
  firstTick() {
    return this.getTick(0, 1)
  }
  
  /**
   * 每条间隔迭代器
   * @returns number
   */
  nextTick() {
    if (this._currentTick >= this._times.length - 1) {
      return Clock.END
    }
    
    const current = this._currentTick
    const next = this._currentTick += 1
    
    return this.getTick(current, next)
  }

  /**
   * 重置迭代器指针
   */
  resetTick() {
    this._currentTick = 0
  }

  /**
   * 当前迭代器指针位置
   */
  currentTick() {
    return this._currentTick
  }
}

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实用主义 | 再也不看马赛克画质的电影了

    从《夏洛特烦恼》、《羞羞的铁拳》到《西虹市首富》,开心麻花貌似成为引爆票房的奇点。想去电影院支持一波,但程序猿看电影不存在的!BUG改完了?膨胀了?还想看电影?

    咸鱼学Python
  • 摸鱼的新发现,滚动条无限滚动

    上班摸鱼,下班摸鱼,一直摸一直爽。在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所...

    小丑同学
  • 为了上班摸鱼,我用Python开发“BOSS来了”!

    作为打工人来说,特别是996,、007的工作,除了干饭之外,最紧张刺激的莫过于上班的时候偶尔偷偷闲,去池塘里面摸摸鱼。

    小小詹同学
  • uikiller for ts使用手册(一)

    uikiller js版地址:https://github.com/ShawnZhang2015/uikiller

    张晓衡
  • 阻止你摸鱼, 节省你的时间,去做一个从容的人-Chrome插件

    chrome插件通过强制的手段禁止大家浪费时间摸鱼,在上班/学习期间下意识的打开摸鱼网站, 自动检测摸鱼网站, 提示激励信息后, 关闭摸鱼网站。

    OBKoro1
  • 在Vue 3中使用JSX

    各位同学下午好,我是来自字节跳动大力智能前端团队的林成璋,最近半年的业余时间(再加上一些摸鱼的时间)主要在维护 Vue 3 的 Babel JSX Plugin...

    公众号@魔术师卡颂
  • 探索 Vue 3 中的 JSX

    各位同学下午好,我是来自字节跳动大力智能前端团队的林成璋,最近半年的业余时间(再加上一些摸鱼的时间)主要在维护 Vue 3 的 Babel JSX Plugin...

    用户4456933
  • 探索 Vue 3 中的 JSX

    本文为 Vue Conf 2021 分享内容。 分享者:林成璋,目前就职于 字节跳动 大力智能前端 团队

    前端迷
  • 用Nunit测试通讯程序

        对于Nunit,我是个纯粹的新手,没想到,第一个练手的,居然是一个通讯程序。难度略微大了点。我的通讯程序是一个类似通讯服务器的程序,能够监听和维持多个连...

    用户1075292
  • 原 荐 如何扒视频

    作者:汪娇娇 时间:2017年11月8日 说到前端开发,免不了在网页里放视频,放视频的话,有时候又免不了扒视频,下面就是我扒视频的辛酸历程,大家且看且珍惜吧。 ...

    jojo
  • 原 荐 如何扒视频

    jojo
  • 一场pandas与SQL的巅峰大战(三)

    在前两篇文章中,我们从多个角度,由浅入深,对比了pandas和SQL在数据处理方面常见的一些操作。

    超哥的杂货铺
  • Python时间处理完全手册

    專 欄 ❈ gw1770df,Python中文社区专栏作者,从事Python开发工作,全栈工程师。 博客: https://word.gw1770df.cc ...

    Python中文社区
  • 9102年,隔壁公司新来的女实习生问我什么是TypeScript ?

    所谓的超集 其实就是最终将你写的TypeScript编译成javascript去执行,因为浏览器上能跑的脚本语言是javascript,这个本质要搞清楚

    Peter谭金杰
  • 基于瑞芯微RV1109 Linux触摸屏GT911驱动调试心得

    很明显这里可以看到系统已经配置了i2c-0、i2c-1、i2c-3、i2c-4、i2c-5,我们可以看下原厂在设备树里面的支持情况:

    morixinguan
  • 《Prometheus监控实战》第3章 安装和启动Prometheus

    yeedomliu
  • 带着老李折腾山寨Workerman(四)

    昨天晚上做梦梦到了栋子,就想起我俩那会儿一起摸鱼的时光。那还是五年前在[ 黑 ]鹭引擎的时候,我俩被人称为公司两大门神,具体表现在于基本一整个白天都在公司门口歇...

    老李秀
  • 12.触摸屏驱动

    触摸屏子系统是通过input子系统来实现,对应设备节点 /dev/input/eventn,熟悉套路后重点放在硬件程序的编写

    嵌入式与Linux那些事
  • linux 触摸屏驱动编写

    早在诺基亚手机还比较流行的时候,那时候触摸屏用的还不多。但是随着触摸屏手机、即智能手机的流行,触摸屏基本成了手机的标配。所以,今天可以看看触摸屏驱动在linux...

    砸漏

扫码关注云+社区

领取腾讯云代金券