美文网首页
利用Worker实现倒计时

利用Worker实现倒计时

作者: helloyoucan | 来源:发表于2018-10-12 12:50 被阅读0次

    在Worker未出现时,在网页上实现一个读秒的倒计时大概是这样

    var now = Date.now()
    var timeDom = document.querySelector('#time')
    var timeId = setInterval(() => {
           now += 1000
           timeDom.innerText =(now/1000)+'秒'
    }, 1000)
    

    或者用setTimeout的方式实现
    但是用setInterval或者setTimeout进行倒计时,会有产生误差的时候:
    1、setInterval或者setTimeout是在指定的时间将任务放到执行队列中,当前面的任务未执行完时,即使到了指定的时间也不会被执行,而是上一个任务执行完毕后再开始执行的,所以会有产生误差的时候。
    2、当主线程被暂停了(例如alert等),执行队列也会停止代码的执行,产生误差。

    当使用Worker时,可以这样实现

    if (typeof (Worker) !== 'undefined') {
             var timeWorker = new Worker('/js/timeWorker.js')
              timeWorker.postMessage(now)
              timeWorker.onerror = ()=>{//处理加载timeWorker.js出错的情况
                     timeId = setInterval(() => {
                         now += 1000
                         timeDom.innerText =(now/1000)+'秒'
                      }, 1000)
              }
              timeWorker.onmessage = (event) => {
               now = event.data
              timeDom.innerText =(now/1000)+'秒'
              }
            } else {//兼容不支持Worker的浏览器
              timeId = setInterval(() => {
                now += 1000
                timeDom.innerText =(now/1000)+'秒'
              }, 1000)
            }
    

    timeWorker.js

    function timedCount(now) {
     now += 1000
     postMessage(now)
     setTimeout('timedCount(' + now + ')', 1000)
    }
    
    onmessage = function (event) {
     timedCount(event.data)
    }
    
    

    Worker代表一个后台任务,它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数,指定一个脚本,在工作线程中执行,不会被主线程影响,避免了使用setInterval或者setTimeout时产生误差的问题。

    需要注意的是,即使用了Worker去进行倒计时,由于 timeDom.innerText =(now/1000)+'秒' 还是在主线程中执行的,所以dom的渲染还是会在前面的任务执行完毕后再重新渲染

    更多关于worker的请移步https://developer.mozilla.org/zh-CN/docs/Web/API/Worker

    2018.12.19补充:处理加载timeWorker.js出错的情况

    相关文章

      网友评论

          本文标题:利用Worker实现倒计时

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