现场红包雨 - web worker 解决轮训问题

使用背景是,用户一起抽奖,大屏展示中奖情况。为防止一次性抽奖人数太多,将中奖名单放入队列中,顺序展示。

  • 一:创建一个轮训机制,查询用户抽奖情况
  • 二:创建一个队列,将中奖列表添加进去,然后顺序取出

队列部分上一篇文章描述过了,这里主要写 web worker

web worker 的几个注意点

  • 1:受同源限制
  • 2:DOM 限制。无法使用document,window等。但是线程可以用location ,navigate对象
  • 3:线程与主进程,只能通过消息通信
  • 4:不能执行alert,confirm等。
  • 5:无法读取本地文件,加载的脚本必须放到服务器

web worker 的使用实例


    // 队列部分
    function Queue() {
        this.list = []
        this.count = 0
    }
    Queue.prototype.setItem = function (item) {
        this.list.push(item)
    }
    Queue.prototype.getItem = function (count) {
        if (this.isEmpty()) {
            return {}
        }
        return this.list.splice(0, count)
    }
    Queue.prototype.isEmpty = function () {
        return this.list.length < 1
    }
    Queue.prototype.leftList = function () {
        return this.list
    }
    var q = new Queue()


    // web worker 部分
    var worker = new Worker('http://192.168.1.161:999/worker.js');
    worker.onmessage = function (event) {
        q.setItem(event.data.data[0])
        console.log(q.getItem(1))
    };

worker.js


var url = 'http://mazhaoyang.cn/index.php/Home/Output/RedpocketAjaxList.html?userid=null'
onmessage = (params) => {
    console.log(params)
}

loogData()
function loogData() {
    setTimeout(() => {
        serviceData()
    }, 1000)
}


function serviceData() {
    fetch(url, {
        method: 'POST',
    }).then(function(res) {
        if (res.status !== 200){
            loogData()
            return
        }
        res.json().then(d => {
            postMessage(d)
            loogData()
        });
    })
}

随机浏览