js Worker解决ios下面倒计时手滑问题

栏目: JavaScript · 发布时间: 7年前

内容简介:js Worker解决ios下面倒计时手滑问题

前言

倒计时我们经常用。之前我也有很多文章提及过。例如:setTimeout倒计时等等。最近在移动端开发过程中,遇到一个ios手机滑动,倒计时卡住的问题,针对这个问题,我们可以用js的Worker。

倒计时案例

用setInterval写的最基本的倒计时,代码如下:

<body>

    <div id="haorooms">60</div>

    <script>

    var haorooms = document.getElementById('haorooms');
    var num = 60;

    var T = setInterval(function(){

        haorooms.innerHTML = --num;
        if(num <= 0){
            clearInterval(T);
        }

    }, 1000);

    </script>
</body>

这段代码在PC中可以正常运行,在Android中也可以正常运行,但是拿到ios中,就会有一个问题,来看图:

js Worker解决ios下面倒计时手滑问题

上图中,当倒计时走到37的时候,用手拖动页面,这个时候js代码会被阻塞,导致倒计时不在执行。

针对这个问题,只能用我们上文中提及的Worker API了。

Worker API

Web Workers API 的 Worker 接口代表一个可以轻松创建的后台任务,并可以将消息发送回其创建者。创建一个工作程序只要简单的调用Worker() 构造函数,并指定一个要在工作线程中运行的脚本。

worker 还能够使用 XMLHttpRequest 实现网络 I/O 操作, 只不过 XMLHttpRequest 上的 responseXML 与 channel 两个属性值始终返回 null。

2个方法

1、postMessage()

向 worker 的内部作用域内传递消息。该方法接收一个单独的参数,即要传递给 worker 的数据。

void postMessage( Object aMessage [, sequence<Transferable> transferList]);

参数:

aMessage:

传输给 worker 的对象;它将包含于传递给 onmessage 处理函数的事件对象中的 data 字段内。你可以传递任意值或是经过结构化拷贝算法处理过的 JavaScript 对象,即可以包含循环引用。

transferList:

一个可选的对象数组,用于转让它们的所有权。如果一个对象的所有权被转让,那么它在原来的上下文内将不可使用,而只能在转让到的 worker 内可用。

2、terminate()

立即终止 worker。该方法不会给 worker 留下任何完成操作的机会;就是简单的立即停止。

解决方案

我们的思路是,将倒计时的计算放到一个单独的文件里,使用 Worder 去执行这个文件。

新建一个 countdown.js 文件:

self.onmessage = function(event){
    var num = event.data;

    var T = setInterval(function(){

        self.postMessage(--num);
        if(num <= 0){
            clearInterval(T);
            self.close();
        }

    }, 1000);
}

由于这个js文件是由 Worker 来在后台执行的文件,所以这个文件内代码的 self 指向的就是 Worker 对象。我们通过 onmessage 时间接收来自页面的倒计时数值,然后原封不动的把之前的倒计时代码拷贝过来,唯一不同的就是使用 self.close() 语句来关闭 Worker。

然后修改之前的页面文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
    <div id="haorooms">60</div>

    <script>
    var haorooms = document.getElementById('haorooms');
    var w = new Worker('counter.js');
    w.postMessage(60);
    w.onmessage = function(event){
        haorooms.innerHTML = event.data;
    }

    </script>
</body>
</html>

在PC中刷新你的页面,可以看到依然正确工作,之后再拿到ios中做之前gif图同样的操作,如下图:

js Worker解决ios下面倒计时手滑问题

我们可以看到,在55秒的时候开始拖动页面,这个时候倒计时停止了,不过,当我们放手之后,倒计时会立刻恢复到正常应该到达的时刻,而不会产生任何误差和延迟,这样,我们就比较完美的解决了这个问题。

注意

上面的Worker代码必须在localhost等环境下面运行,因为上面提及过,它用到了XMLHttpRequest。

关于Worker更多API,请查看: https://developer.mozilla.org/en-US/docs/Web/API/Worker

中文版可以看: https://developer.mozilla.org/zh-CN/docs/Web/API/Worker

部分资料同事提供,来源已无法考究作者。


以上所述就是小编给大家介绍的《js Worker解决ios下面倒计时手滑问题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

智能商业

智能商业

曾鸣 / 中信出版集团 / 2018-11 / 68.00

《智能商业》由马云作序推荐。《智能商业》是阿里巴巴集团前总参谋长曾鸣,对互联网时代的重要趋势做出革命性解读的作品,披露了其对于未来商业模式的思考和判断。 2006年,曾鸣教授加入阿里巴巴集团,参与阿里巴巴集团及各重要业务线,如淘宝、支付宝、阿里云计算、菜鸟等的发展,被业界称为阿里的“军师”。 基于在阿里巴巴集团十几年的实践经验,以及对互联网、大数据和人工智能的深入思考,曾鸣教授在《智能......一起来看看 《智能商业》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具