javaScriptWeb前端之路让前端飞

javascript -- 计时器实现

2019-05-18  本文已影响37人  反者道之动001

JS计时器, 支持开始、暂停、继续、任务执行

计时器,返回 时:分:秒

export const Timekeep = () => {
    var keppTwoNumber = (n) => {
        return (n + '').length === 1 ? `0${n}` : n
    }
    var get_date_s = (n) => {
        return keppTwoNumber(n % 60)
    }
    var get_date_m = (n) => {
        return keppTwoNumber((n  % 3600 / 60) | 0)
    }
    var get_date_h = (n) => {
        return keppTwoNumber((n / (60 * 60)) | 0)
    }
    let type = ''
    let nextNum = 0
    let userCallFunc
    // 任务执行列表,控制start进来生命周期
    let taskList = []
    let count = (n, callback, taskId) => {
        if(taskId){
            if(!taskList.includes(taskId)){
                return
            }
        }
        setTimeout(() => {
            if (type === 'start' || type === 'continue') {
                nextNum = n + 1
                callback({
                    h: get_date_h(nextNum),
                    m: get_date_m(nextNum),
                    s: get_date_s(nextNum),
                })
                count(nextNum, callback, taskId)
            }
        }, 1e3)
    }
    return {
        getTaskId: () => (+new Date + Math.random() * 100 | 0) + '',
        start(_userCallFunc, { n, taskId }) {
            userCallFunc = _userCallFunc
            type = 'start'
            taskId && taskList.push(taskId)
            count(n || 0, userCallFunc, taskId)
        },
        stop() {
            if (!userCallFunc) {
                console.error('未启动,请先启动')
                return
            }
            type = 'stop'
        },
        continue() {
            if (!userCallFunc) {
                console.error('未启动,请先启动')
                return
            }
            type = 'continue'
            count(nextNum, userCallFunc)
        },
        end(taskId) {
            // 启用任务管理的话,销毁的时候移除任务
            if(taskId){
                taskList = taskList.filter(id => id !== taskId)
            }
            if (!userCallFunc) {
                console.error('未启动,请先启动')
                return
            }
            // 清空释放资源
            type = null
            nextNum = null
            userCallFunc = null
        }
    }
}

USE

API:

start 开始计时,最开始执行的函数

start(
  // 回调函数 必填
  (data: type:  { 时: 分: 秒 }) => {},
  // 参数是可选的
  {
    n: 当前时间,秒为单位,
    taskId: 任务ID, 从timeKeep.getTaskId() 获取的
  }
)

stop 暂停计时

stop()

continue 继续计时

stop()

stop 暂停计时

continue()

例子

Start

var timeKeep = new Timekeep()
timeKeep.start(e => {
  console.log(e) // { 时: 分: 秒 }
})

进阶, 暂停,继续,结束

timeKeep.start(e => {
  console.log(e) // { 时: 分: 秒 }
})
// 时间过去了3秒
await new Promise(e => setTimeout(e), 1e3)
// 暂停
timeKeep.stop()
// 时间过去了3秒
await new Promise(e => setTimeout(e), 1e3)
// 继续执行
timeKeep.continue()
// 时间过去了3秒
await new Promise(e => setTimeout(e), 1e3)
// 暂停
timekeep.stop()

高级

var timeKeep = new Timekeep()
var taskId  = timekeep.getTaskId()
timekeep.start((e) => {
// 操作
}, {
      // n 是秒
      n: HMS2S(timeStr, ':') + addNumber,
      taskId
})
// 。。。暂停等
// 结束
timekeep.end(taskId)

说明

TODO

--END--

上一篇 下一篇

猜你喜欢

热点阅读