WebWorker简单应用

先从一个简单例子说起,计算数值加法

    <script>
        var worker = new Worker('sumCalculate.js');
        worker.onmessage = function (event) {
            alert('The sum is ' + event.data);
        }
        function calculate() {
            var num = parseInt(document.getElementById('num').value, 10);
            worker.postMessage(num);
        }
    </script>
    输入数值:<input type="text" id="num" />
    <button onclick="calculate()">计算</button>

sumCalculate.js代码如下所示:

onmessage = function (event) {
    var num = event.data;
    var result = 0;
    for (var i = 0; i <= num; i++) {
        result += i;
    }
    postMessage(result);
}

这段代码很简单,事实上就是主线程将需要求和的值传给计算加法的js,然后js计算好之后再传回给主界面

再看一个稍微复杂一点的应用

    <script>
        var intArray = new Array(100);
        var intStr = "";
        for (var i = 0; i < 100; i++) {
            intArray[i] = parseInt(Math.random() * 100);
            if (i != 0) {
                intStr += ";"
            }
            intStr += intArray[i];
        }
        var worker = new Worker('inter.js');
        worker.postMessage(intStr);
        worker.onmessage = function (event) {
            if (event.data != '') {
                var j, k, tr, td, intArray = event.data.split(";");
                var table = document.getElementById('table');
                for (var i = 0; i < intArray.length; i++) {
                    j = parseInt(i / 10, 10);
                    k = i % 10;
                    if (k == 0) {
                        tr = document.createElement('tr');
                        tr.id = 'tr' + j;
                        table.appendChild(tr);
                    } else {
                        tr = document.getElementById('tr' + j);
                    }
                    td = document.createElement('td');
                    tr.appendChild(td);
                    td.innerHTML = intArray[j * 10 + k];
                    td.style.backgroundColor = 'blue';
                    td.style.color = 'white';
                    td.width = '30';
                }
            }
        }
    </script>
    <table id="table"></table>

上面例子中用到的inter.js代码如下所示:

onmessage = function (event) {
    var data = event.data;
    var returnStr = "";
    var intArray = data.split(';');
    returnStr += intArray[0];
    for (var i = 1; i < intArray.length; i++) {
        if (parseInt(intArray[i],10) % 3 == 0) {
            returnStr += ";"
            returnStr += intArray[i];
        }
    }
    postMessage(returnStr);
}

产生的界面效果图如下所示:

事实上,上面的这个生成随机数的例子还可以使用嵌套线程的方式来实现,具体如下所示:

主界面代码如下所示:

    <script>
        var worker = new Worker('w1.js');
        worker.postMessage('');
        worker.onmessage = function (event) {
            if (event.data != '') {
                var j, k, tr, td, intArray = event.data.split(";");
                var table = document.getElementById('table');
                for (var i = 0; i < intArray.length; i++) {
                    j = parseInt(i / 10, 10);
                    k = i % 10;
                    if (k == 0) {
                        tr = document.createElement('tr');
                        tr.id = 'tr' + j;
                        table.appendChild(tr);
                    } else {
                        tr = document.getElementById('tr' + j);
                    }
                    td = document.createElement('td');
                    tr.appendChild(td);
                    td.innerHTML = intArray[j * 10 + k];
                    td.style.backgroundColor = 'blue';
                    td.style.color = 'white';
                    td.width = '30';
                }
            }
        }
    </script>
    <table id="table"></table>

w1.js如下所示:

onmessage = function (event) {
    var intArray = new Array(100);
    var intStr = "";
    for (var i = 0; i < 100; i++) {
        intArray[i] = parseInt(Math.random() * 100);
    }
    var w = new Worker('w2.js');
    w.postMessage(JSON.stringify(intArray));
    w.onmessage=function (event) {
        postMessage(event.data);
    }
}

w2.js如下所示:

onmessage = function (event) {
    var intArray = JSON.parse(event.data);
    var returnStr = "";
    returnStr += intArray[0];
    for (var i = 1; i < intArray.length; i++) {
        if (parseInt(intArray[i], 10) % 3 == 0) {
            returnStr += ";"
            returnStr += intArray[i];
        }
    }
    postMessage(returnStr);
    close();
}

在opera浏览器下运行正常,但在chrome下就报如下所示错误(可能chrome不允许次线程里面再创建线程吧)

要详细了解WebWorker,请看我的另外一篇博文 Web Worker

地理定位

地理定位其实很简单,就是利用navigator对象的一个属性geolocation

        navigator.geolocation.getCurrentPosition(show_map);
        //其中show_map是回调函数。加上判断浏览器是否支持:
        function get_location() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(show_map);
            } else {
                alert("Your browser does not support geoLocation");
            }
        }
        function show_map(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            showObject(position, 0);//把数据显示出来的函数
        }

如果是在电脑上使用地理定位的话,浏览器会弹出如下所示提示信息

回调函数的参数position提供了一系列的参数供开发者使用

地理信息这东西,经常会出错,各种因素,例如信号不好等等。因此getCurrentPosition其实还有第二个参数,就是处理错误的,如下:

navigator.geolocation.getCurrentPosition(show_map,handle_error);

其中handle_error也是一个回调函数,提供一个err对象,包含code和message两个属性,使用方法较简单:

function handle_error(err){
    switch(err.code){
        case 1 :
            alert("permission denied"); break;
        case 2:
            alert("the network is down or the position satellites can't be contacted"); break;
        case 3:
            alert("time out"); break;
        default:
            alert("unknown error"); break;
    }
}

事实上,getCurrentPosition其实还有第三个参数,是一个对象,可以设置超时时间、缓存时间等,具体如下图所示:

特别注意哦:enableHighAccuracy表示是否允许使用高精度,但这个参数在很多设备上设置了都没用,设备综合考虑电量、地理情况等,很多时候都是默认的由设备自身来调整。

maximumAge是指缓存的时间,例如maximumAge:120000(1分钟是60000)。那么如果10:00整的时候获取过一次地理信息,10:01的时候,再次调用navigator.geolocation.getCurrentPosition,返回的依然是10:00时候的数据(因为设置的缓存有效时间为2分钟),超过这个时间后缓存的地理位置信息被废弃,尝试重新获取地理位置信息,如果该值被指定为0,则无条件重新获取新的地理位置信息。

        int watchCurrentPosition(onSuccess,onError,options)//持续监视当前地理位置的信息
        void clearWatch(watchId);//停止获取当前用户的地理位置信息

HTML5系列四(WebWorker、地理定位)的更多相关文章

  1. HTML5系列四(特征检测、Modernizr.js的相关介绍)

    Modernizr:一个HTML5特征检测库 Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作 Modernizr是自动运行的,无须调用诸 ...

  2. HTML5学习总结-03 地理定位

    一 地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置. 1 地理定位 地理位置 经度  :   南北极的连接线 纬度  :   东西连接的线 位置信息从何而来: IP地址 G ...

  3. 从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  5. 小强的HTML5移动开发之路(18)——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  6. HTML5 Geolocation API地理定位整理(一)

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

  7. 用HTML5、地理定位API和Web服务来开发移动应用

    HTML 5 是一项让人振奋的技术,这有着充分的理由.这将会是一次技术突破,因为它可以将桌面应用程序功能带入浏览器中.除了传统浏览器外,对于移动浏览器,其潜力甚至更大.不仅如此,最流行的移动浏览器甚至 ...

  8. HTML5地理定位,百度地图API,知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  9. HTML5 总结-地理定位-6

    HTML5 地理定位 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Int ...

随机推荐

  1. mongodb ubuntu下自启动

    个人测试开发的时经常会采用shell 启动mongodb,当进入项目团队开发测试时,必须让mongodb可以随系统自启动. 1.编写启动命令 sudo vim /etc/rc/local 1-1 mo ...

  2. 关于年终奖励的扣税算法BUG

    这么多年,第一次拿年终奖,于是查一下年终奖是怎么扣税的,根据 国税发[2005]9号 适用公式为: 应纳税额=雇员当月取得全年一次性奖金×适用税率一速算扣除数 年终奖: /= 的税率是3% 按照网上说 ...

  3. Linux bash常用测试判断选项

    bash编程中if [   ]后面的测试选项: 1.整数测试: -le less equal -lt less than -ge greater equal -gt greater than -eq ...

  4. Java集合框架的四个接口

    接口 [四个接口  collection  list  set  map 的区别] collection 存储不唯一的无序的数据 list 存储有序的不唯一的数据 set   存储无序的唯一的数据 m ...

  5. 4.QPixmap,QTransform,绘图函数的使用

     新建一个项目Painter MyWidget.h #ifndef MYWIDGET_H #define MYWIDGET_H #include <QWidget> class MyW ...

  6. 高新兴 ME3630-W 4G 模块 Android 平台适配

    2019-04-26 关键字:高新兴 ME3630-W 适配.rk3128 移植 4G 模块 本篇文章系笔者在移植 高新兴物联 ME3630-W 4G 模块到运行着 Android4.4 操作系统的 ...

  7. 【C++11】unoedered_map和map(部分转载)

    1.结论 新版的hash_map都是unordered_map了,这里只说unordered_map和map. 运行效率:unordered_map最高,而map效率较低但提供了稳定效率和有序的序列. ...

  8. 谈谈maven多模块

    记得在校的时候,通常用的比较多是动态web工程,动态web工程导入最多就是jar包,这些jar包需要自己手动复制粘贴放入lib目录下,然后build path,有的IDE会自动build path有的 ...

  9. cdh-5.10.0搭建安装

    1.修改主机名为master, slave1, slave2 vim /etc/sysconfig/network HOSTNAME = master HOSTNAME = slave1 HOSTNA ...

  10. 【java初探】——格式化字符串

    String 类的静态方法format()方法用于创建格式化字符串,format()方法有两种重载形式: format(String fromat,Object...args) 该方法使用指定的格式字 ...