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. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  2. POJ 3276 (开关问题)

    题目链接: http://poj.org/problem?id=3276 题目大意:有一些牛,头要么朝前要么朝后,现在要求确定一个连续反转牛头的区间K,使得所有牛都朝前,且反转次数m尽可能小. 解题思 ...

  3. Java局部变量final

    局部变量和形参带final. 在一个线程A中开起另一个线程B,如果线程B要使用线程A的局部变量,那么A的局部变量需要定义成final.理由:局部变量是线程内部共享的,每一个线程内的不能访问其他线程的局 ...

  4. [转]Swift 编程语言入门教程

    今天在网上看到一篇非常好的教程,分享给大家 原文地址:http://gashero.iteye.com/blog/2075324 目录 1   简介 2   Swift入门 3   简单值 4   控 ...

  5. Unity项目优化--开发项目的小经验

    原文地址:http://blog.csdn.net/liang_704959721/article/details/8548619 我们主要使用 3dsmax2010 进行制作,输出 FBX的类型导入 ...

  6. requirejs 一个拆分js项目的类库

    http://www.requirejs.cn/ http://requirejs.org/docs/start.html

  7. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  8. SharePoint 2007 单列表模糊查询SPD定制

    应用场景:项目中总会遇到一些列表,存着是用户.项目等数据,而我们需要查询有哪些项目,这时候,就需要用到模糊查询了,而这样的查询,基本不需要跨列表,所以,也没必要配置复杂的搜索,用Designer(简称 ...

  9. 改造MIP获得搜索青睐,轻松完成SEO

    搜索引擎目标及页面排序方法 搜索引擎作为互联网流量的入口,承担着流量分发的职责.但排序成千上万的网页,决定哪些网页在第一页,是由网页本身的用户体验决定的.权重算法会从内容优质性,广告多少,加载速度等多 ...

  10. node day2 vue read html

    app.js var http = require("http"); var fs = require('fs'); var url = require('url'); http. ...