web worker

今天实现轨迹查询，也不知道别人家怎么查的，和我对接的后台提供的查询接口，万条数据让我自己轮询查，好吧，每次查2000条，结果最差的居然要耗时5到7秒，如此循环，直接导致我的web页面卡死，无奈无法去搞定后台小伙伴，只能前台开个“多线程”。

利用web worker!!

worker.js:

var totalCountStatus=-1;
var param;
var statusListAll=[];
var linkListAll=[];

function getAllUavStatus(param){
    let obj=null;
    var xmlhttpreq = new XMLHttpRequest();
    xmlhttpreq.open('post',param.url,false);
    let formData = new FormData();
    formData.append('start', param.start);
    formData.append('startTime', param.startTime);
    formData.append('endTime', param.endTime);
    formData.append('count', param.count);
    formData.append('FCSSID', param.FCSSID);
    formData.append('regno', param.regno);
    xmlhttpreq.onreadystatechange=function () {
        console.log("xmlhttpreq");
        console.log(xmlhttpreq);
        if(xmlhttpreq.readyState==4&&xmlhttpreq.status==200){
            console.log("js原生请求登陆返回 xmlhttpreq：");
            console.log(xmlhttpreq);   //完全后台返回的数据
            let data = JSON.parse(xmlhttpreq.responseText);
            if(data.state==1){
                totalCountStatus=data.data.totalCountStatus;
                let statusList=data.data.statusList;
                let linkList=data.data.linkList;
                obj= {statusList:statusList,linkList:linkList,totalCountStatus:totalCountStatus};
                return obj;
            }
        }
    }

    xmlhttpreq.send(formData);
    return obj;
}



function initWorker(){
    statusListAll=[];
    linkListAll=[];
    let obj=getAllUavStatus(param);
    if(obj){
        totalCountStatus=obj.totalCountStatus;
        console.log("obj");
        console.log(obj);
        console.log(obj.statusList);
        console.log("obj.concat");
        statusListAll=statusListAll.concat(obj.statusList);
        linkListAll= linkListAll.concat(obj.linkList);
    }
    while (totalCountStatus==-1){
       console.log("等待第一次查询");
    }
    for(let i=0;i<(totalCountStatus-param.count);i=i+param.count){
        param.start=param.start+param.count;
        let obj=getAllUavStatus(param);
        if(obj){
            statusListAll= statusListAll.concat(obj.statusList);
            linkListAll=linkListAll.concat(obj.linkList);
        }
    }
    let res={statusListAll:statusListAll,linkListAll:linkListAll};
    let data={"cmd":"RES","res":res};
    self.postMessage(data);

}

var statusList;
var curIdex=0;
var  stopTag=false;
var  times=1;
self.addEventListener('message', function (e) {
    var data = e.data;
    console.log(e);
    console.log(data);
    switch (data.cmd) {
        case 'INIT':
            self.postMessage('WORKER STARTED !' );
            param=e.data.data;
            initWorker();
            break;
       /* case 'PLAY':
            statusList = data.statusList;
            stopTag=false;
            curIdex=0;
            sendAllPosition();
            break;
        case 'STOP':
            self.postMessage('STOPED: ' ); // 或者父级worker.terminate();
            stopTag=true;
            break;
        case 'PAUSE':
            stopTag=true;
            break;
        case 'SPEED':
            times= data.times;
            break;*/
        default:
            self.postMessage('Unknown command: ' + data.msg);
    };
}, false);

 

 

 

 

调用worker:

var worker = new Worker('../../js/worker.js');

worker.onmessage = function (event) {
    console.log('Received message ' + event.data);
    if(event.data.cmd=="RES"){
        let res = event.data.res;
        if(res.linkListAll){
            linkListAll=res.linkListAll;
        }
        if(res.statusListAll){
            statusListAll=res.statusListAll;
            for(let i =0;i<statusListAll.length;i++){
                devLngLatTransfer(statusListAll[i]);
                let s = statusListAll[i];
                let ollnglat=coordtransform.gps2OL(s.pos.lng,s.pos.lat);
                pathArr.push(ol.proj.fromLonLat(ollnglat, wms_fcow.EPSG));
            }
        }
        layer.close(loading);
       // worker.postMessage({"cmd":"stop"});
        getPosArr();

    }
}

的确好了很多，‘’多线程‘’既视感~~~

另外：我模拟的轨迹，就是根据time的前后相邻差值， for循环setTimeout() 哈哈哈哈，倍速就是插值除以倍速值，咳咳咳~~~~

 

PPS:woker内部不能执行alert,confirm,貌似setTimeout也不行哦，所以我在外层setTimeout，

 

详情参考：http://www.ruanyifeng.com/blog/2018/07/web-worker.html

阿花要更努力学习！

 

<script>alert(1)</script>