如果我们在非浏览器环境中使用js,用它们来分别

作者: 前端  发布:2019-10-12

管理页面的 setTimeout & setInterval

2017/09/28 · JavaScript · setInterval, settimeout

原文出处: 凹凸实验室   

图片 1在管理 setTimeout & setInterval 这两个 APIs 时,笔者通常会在顶级(全局)作用域创建一个叫 timer 的对象,在它下面有两个数组成员 —— {sto, siv},用它们来分别存储需要管理的 setTimeoutID / setIntervalID。如下:

JavaScript

var timer = { sto: [], siv: [] };

1
2
3
4
var timer = {
sto: [],
siv: []
};

在使用 setTimeout / setInterval 的时候,这样调用:

JavaScript

// 标记 setTimeoutID timer.sto.push( setTimeout(function() {console.log("3s")}, 3000); ); // 标记 setIntervalID timer.siv.push( setInterval(function() {console.log("1s")}, 1000) );

1
2
3
4
5
6
7
8
// 标记 setTimeoutID
timer.sto.push(
setTimeout(function() {console.log("3s")}, 3000);
);
// 标记 setIntervalID
timer.siv.push(
setInterval(function() {console.log("1s")}, 1000)
);

在页面需要 clearTimeout clearInterval 的时候,这样调用:

JavaScript

// 批量清除 setTimeout timer.sto.forEach(function(sto) {clearTimeout(sto)}); // 批量清除 setInterval timer.siv.forEach(function(siv) {clearInterval(siv)});

1
2
3
4
// 批量清除 setTimeout
timer.sto.forEach(function(sto) {clearTimeout(sto)});
// 批量清除 setInterval
timer.siv.forEach(function(siv) {clearInterval(siv)});

复制代码 代码如下:

9.26-9.30

暂停 & 恢复

近段时间,笔者发现很多业务都需要「暂停」和「恢复」setTimeout & setInterval 的功能,而仅靠原生的四个 APIs(setTimeout / setIntervale / clearTimeout / clearInterval)是不够用的。于是,笔者对 timer 进行了扩展,使它具备了「暂停」和「恢复」的功能,如下:

JavaScript

// 暂停所有的 setTimeout & setInterval timer.pause(); // 恢复所有的 setTimeout & setInterval timer.resume();

1
2
3
4
// 暂停所有的 setTimeout & setInterval
timer.pause();
// 恢复所有的 setTimeout & setInterval
timer.resume();

扩展后的 timer对象下面挂载6个基础的 APIs。

  • setTimeout
  • setInterval
  • clearTimeout
  • clearInterval
  • pause
  • resume

使用 timer.set* & timer.clear* 来代替原生的 set* & clear*。笔者把扩展后的 timer 托管在 GitHub 仓库上,有兴趣的同学可以移步:

(function($) {
(function($) {
$.preload = function(data, cfg) {
return new Loader(data, cfg);
};
var maps = {}, on = $.event.add, un = $.event.remove, head = document.getElementsByTagName('head')[0], body =
document.body, bs = $.browser, ie = bs.msie, webkit = bs.webkit, gecko = bs.mozilla, space = 1000, ajax =
$.ajax,
loaders = $.preload.loaders = {
'js' : function(url, callback, timeout, defer) {
var s, timer;
if (defer) {
if (ie) {
return loaders.img(url, callback, timeout);
} else {
s = document.createElement('object');
s.data = url;
s.width = s.height = 0;
}
} else {
s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', url);
}
function f() {
if (timer)
clearTimeout(timer);
s.onreadystatechange = s.onload = s.onerror = null;
callback(url, false);
}
if (ie) {
s.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
if (timer)
clearTimeout(timer);
s.onreadystatechange = null;
callback(url, true);
}
};
} else {
s.onload = function() {
if (timer)
clearTimeout(timer);
s.onload = s.onerror = null;
callback(url, true);
};
s.onerror = f;
}
timer = setTimeout(f, timeout);
body.appendChild(s);
},
'css' : function(url, callback, timeout, defer) {
if (defer) {
return loaders.js(url, callback, timeout, defer);
}
var s = document.createElement('link'), timer;
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
s.setAttribute('href', url);
function f() {
if (timer)
clearTimeout(timer);
s.onreadystatechange = s.onload = s.onerror = null;
callback(url, false);
}
if (ie) {
s.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
if (timer)
clearTimeout(timer);
s.onreadystatechange = null;
callback(url, true);
}
};
timer = setTimeout(f, timeout);
} else if (webkit || gecko) {
timer = new Date();
function f() {
if (('sheet' in s) && ('cssRules' in s.sheet)) {
try {
callback(url, !!s.sheet.cssRules[0]);
} catch (e) {
setTimeout(f, space);
}
} else if (new Date() - timer > timeout) {
callback(url, false);
} else {
setTimeout(f, space);
}
}
setTimeout(f, space * 2);
} else {
s.onload = function() {
if (timer)
clearTimeout(timer);
s.onload = s.onerror = null;
callback(url, true);
};
s.onerror = f;
timer = setTimeout(f, timeout);
}
head.appendChild(s);
},
'img' : function(url, callback, timeout) {
var s = new Image(), timer;
function f() {
if (timer)
clearTimeout(timer);
s.onload = s.onerror = null;
callback(url, false);
}
s.onload = function() {
if (timer)
clearTimeout(timer);
s.onload = s.onerror = null;
callback(url, true);
};
s.onerror = f;
timer = setTimeout(f, timeout);
s.src = url;
},
'ajax' : function(url, callback, cfg) {
cfg = cfg || {};
cfg.url = url;
cfg.success = function(data) {
callback(url, true, data);
};
cfg.error = function() {
callback(url, false);
};
ajax(cfg);
}
};
function Loader(data, cfg) {
var self = this, cur = -1, items = [], pendings = [], done, i = 0, l = data.length, j, m, s, t, c, d, tt, item, doing =
0, load;
cfg = cfg || {};
for (; i < l; ++i) {
item = data[i];
if (typeof item === 'string') {
s = item.substr(item.lastIndexOf('.') + 1);
items.push(maps[item] = {
type : loaders[s] ? s : 'img',
url : item
});
} else if (item.urls) {
for (j = 0, s = item.type, t = item.require, c = item.callback, d = item.defer, tt = item.timeout, item =
item.urls, m = item.length; j < m; ++j) {
s = s || item[j].substr(item[j].lastIndexOf('.') + 1);
items.push(maps[item[j]] = {
type : loaders[s] ? s : 'img',
url : item[j],
require : t,
callback : c,
defer : d,
timeout : tt
});
}
} else {
if (!item.type) {
s = item.url.substr(item.url.lastIndexOf('.') + 1);
item.type = loaders[s] ? s : 'img';
}
items.push(maps[item.url] = item);
}
}
this.success = this.fail = this.progress = 0;
if (cfg.onFinish)
this.onFinish = cfg.onFinish;
timeout = cfg.timeout || 2000;
function callback(url, flag, data) {
if (flag) {
++self.success;
} else {
++self.fail;
}
self.progress = (self.success + self.fail) / items.length;
console.info(url);
console.warn(flag);
item = maps[url];
item.success = flag;
if (self.progress === 1) {
self.stop();
}
if (item.parent && !item.defer && !cfg.defer) {
$(item.parent)[0].innerHTML = data || '';
}
if (item.callback) {
item.callback(data);
}
item.done = true;
--doing;
}
function runnable(item, pend) {
var it;
if (typeof item.require === 'string') {
if (item.done)
return false;
if (!item.require)
return true;
it = maps[item.require];
if (!it || it.done) {
if (pend)
pendings.shift();
if (it && it.success) {
return true;
} else {
callback(item.url, false);
}
} else if (!pend) {
pendings.push(item);
}
} else {
for (it = item.length; it--;) {
if (!runnable(item[it], pend))
return false;
}
return true;
}
}
function run() {
var item = pendings[0];
if (!item || !runnable(item, true)) {
while (item = items[++cur]) {
if (runnable(item)) {
break;
}
}
}
if (item) {
var fn = loaders[item.type || 'img'];
if (fn) {
++doing;
if (item.type === 'ajax') {
if (item.cfg && !item.cfg.timeout)
item.cfg.timeout = timeout;
fn(item.url, callback, item.cfg);
} else {
fn(item.url, callback, item.timeout || timeout, item.defer === undefined ? cfg.defer
: item.defer);
}
};
if (load) {
run();
} else {
self.timer = setTimeout(run, space);
}
} else if (pendings.length) {
self.timer = setTimeout(run, space);
}
}
this.start = function(delay) {
if (!done)
this.timer = setTimeout(run, delay > space ? delay : space);
};
this.stop = function() {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
done = true;
if (this.onFinish) {
if (!doing)
this.onFinish();
else {
s = setInterval(function() {
if (!doing) {
clearInterval(s);
self.onFinish();
}
}, space);
}
}
}
};
this.pause = function() {
clearTimeout(this.timer);
};
this.resume = function() {
this.timer = setTimeout(run, space);
};
this.load = function() {
clearTimeout(this.timer);
load = true;
run();
};
}
})(jQuery);
/**
* @example
* var loader = $.preload([
// 字符串,采用默认配置
'1.jpg', '1.js',
// 对象,自定义配置,如type, require, timeout, defer, callback
{
type : 'img',
url : '',
timeout : 10
}, {
url : '3.js',
callback : fn,
defer : true,
require : '1.js'
},
// 对象,可用urls指定一组相同配置
{
type : 'css',
urls : ['4.css', '5.css']
}], {
// 加载结束后调用
onFinish : fn,
// 加载超时
timeout : 50
});
// 开始预加载
loader.start();
loader.stop();
// 暂停预加载
loader.pause();
loader.resume();
// 实时加载
loader.load();
*/

第8章 驯服线程和定时器

CreateJS 的启发

在使用 CreateJS 开发一些项目的过程中,笔者发现通过设置 createjs.Ticker.paused = true / false,可以暂停/恢复 createjs.Tween 上的动画。于是笔者借用 createjs.Tween 模拟了 setTimeout & setInterval 的功能,如下:

JavaScript

// setTimeout createjs.setTimeout = function(fn, delay) { createjs.Tween.get().wait(delay).call(fn); } //setInterval createjs.setInterval = function(fn, delay) { createjs.Tween.get().wait(delay).call(fn).loop = 1; }

1
2
3
4
5
6
7
8
// setTimeout
createjs.setTimeout = function(fn, delay) {
createjs.Tween.get().wait(delay).call(fn);
}
//setInterval
createjs.setInterval = function(fn, delay) {
createjs.Tween.get().wait(delay).call(fn).loop = 1;
}

具体的代码笔者托管在:createjs.timer。
其实就是在 createjs 对象下挂载四个 APIs:

  • setTimeout
  • setInterval
  • clearTimeout
  • clearInterval

使用方法与原生的 setTimeout & setInterval 一样,如下:

JavaScript

let siv = createjs.setInterval(() => console.log("1s"), 1000); createjs.setTimeout(() => createjs.clearInterval(siv), 5000);

1
2
let siv = createjs.setInterval(() => console.log("1s"), 1000);
createjs.setTimeout(() => createjs.clearInterval(siv), 5000);

定时器可以在js中使用,但它不是js的一项功能,如果我们在非浏览器环境中使用js,很可能定时器就不存在了,需要自己实现自己的定时器版本。

时间轴驱动的 timer

createjs.timer 在 CreateJS 项目的开发给笔者带来了极大的便利,但是它必须依赖 createjs.Tween 模块。于是笔者就在思考能否创建一个跟第三方框架无关并且又可以在第三方框架上使用的 timer

createjs.Ticker.paused 为什么能暂停 createjs.Tween 上的动画的?
createjs.Tween 中每一个动画都有一条自己的时间轴,这条时间轴是通过 createjs.Ticker 来驱动的;当 createjs.Ticker 被暂停后,createjs.Tween 中的每个动画的时间轴也会失去动力而暂停下来。

createjs.Ticker 的作用是提供一个刷新 canvas 画面帧频,通常是使用 requestAnimationFrame or setInterval 来实现的。如果 timer 内部存在一条时间轴,这条时间轴由第三方驱动,那么 timer 就可以与第三方框架状态同步了。

笔者是这样设计 timer 的结构:

  • queue —— 存放 setTimeout or setInterval 的队列;
  • updateQueue —— 驱动 queue 的内部 API;
  • update —— 外部接口,用于对接第三方 Ticker。

实现的伪代码如下:

JavaScript

/* @queue 成员的结构如下: { fn: fn, // 回调函数 type: "timeout or interval", // 类型 elapsed: 0, // 时间轴进度 delay: delay // 目标时长 } */ let queue = new Map(); function updateQueue(delta) { queue.forEach((item, id) => { item.elapsed += delta; if(item.elapsed >= item.delay) { item.fn(); // 从 queue 中删除 setTimeout 成员,interval 成员继续循环 item.type === "timeout" ? delete(id) : (item.elapsed = 0); } }); } // 对外接口 this.update = function(delta) { updateQueue(delta); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
@queue 成员的结构如下:
{
fn: fn, // 回调函数
        type: "timeout or interval", // 类型
        elapsed: 0, // 时间轴进度
        delay: delay // 目标时长
}
*/
let queue = new Map();
function updateQueue(delta) {
queue.forEach((item, id) => {
        item.elapsed += delta;
        if(item.elapsed >= item.delay) {
            item.fn();
            // 从 queue 中删除 setTimeout 成员,interval 成员继续循环
            item.type === "timeout" ? delete(id) : (item.elapsed = 0);
        }
    });
}
// 对外接口
this.update = function(delta) {
updateQueue(delta);
}

timer 的具体实现可以参考:

timer 与 CreateJS 一起使用:

JavaScript

// es6 代码 import timer from './modules/timer'; // 统一 ticker createjs.Ticker.addEventListener("tick", function(e) { e.paused || timer.update(e.delta); });

1
2
3
4
5
6
// es6 代码
import timer from './modules/timer';
// 统一 ticker
createjs.Ticker.addEventListener("tick", function(e) {
  e.paused || timer.update(e.delta);
});

timer 与 PIXI 一起使用:

JavaScript

// es6 代码 import timer from './modules/timer'; // 统一 ticker app.ticker.add("tick", function() { timer.update(app.ticker.elapsedMS); });

1
2
3
4
5
6
// es6 代码
import timer from './modules/timer';
// 统一 ticker
app.ticker.add("tick", function() {
  timer.update(app.ticker.elapsedMS);
});

附上 PIXI 的线上 DEMO,二维码如下:

图片 2

定时器提供了一种让一段代码在一定毫秒之后,再异步执行的能力。由于js是单线程的特性(同一时间只能执行一处js代码),定时器提出了一种跳出这种限制的方法,以一种不太直观的方式来执行代码。

总结

感谢阅读完本文章的读者。本文仅代表个人观点,希望能帮助到有相关问题的朋友,如果本文有不妥之处请不吝赐教。

1 赞 4 收藏 评论

图片 3

8.1 定时器和线程是如何工作的

8.1.1 设置和清除定时器

js提供了两种方式,用于创建定时器以及两个相应的清除方法(删除)。这些方法是window对象(全局上下文)上的方法。

id = setTimeout(fn,delay) 启动一个定时器,在一段时间(delay)之后执行传入的callback,并返回该定时器的唯一标识

clearTimeout(id) 如果定时器还未触发,传入定时器标识即可取消(清除)该定时器

id = setInterval(fn,delay) 启动一个定时器,在每隔一段时间之后都执行传入的callback,并返回该定时器的唯一标识

clearInterval(id) 传入间隔定时器标识,即可取消该间隔定时器

js定时器的延迟时间是不能保证的,原因和js线程的本质有很大关系。

8.1.2 执行线程中的定时器执行

在Web worker可用之前,浏览器中的所有js代码都是在单线程中执行的,是的,只有一个线程。

处理程序在执行时必须进行排队执行,并且一个处理程序并不能中断另外一个处理程序的执行。

8.1.3 timeout与interval之间的区别

示例8.1 两种创建重复定时器的方式

setTimeout(function repeatMe(){  //定义一个timeout定时器,每10毫秒都重新调用自己

//code

setTimeout(repeatMe,10)

},10)

setInterval(function(){  //定义一个interval定时器,每10毫秒都触发一次

//code

},10)

在setTimeout()代码中,要在前一个callback回调执行结束并延迟10秒以后,才能再次执行setTimeout()。

而setInterval()则是每隔10毫秒就尝试执行callback回调,而不关注上一个callback是何时执行的。

.js引擎是单线程执行,异步事件必须要排队等待才能执行

.如果无法立即执行定时器,该定时器会被推迟到下一个可用的执行时间点上(可能更长,但不会比指定的延迟时间更少)。

.如果一直被延迟,到最后,interval间隔定时器可能会无延迟执行,并且同一个interval处理程序的多个实例不能同时进行排队。

.setTimeout()和setInterval()在触发同期的定义上是完全不同的。

8.2 定时器延迟的最小化及其可靠性

现代浏览器通常无法实现1毫秒粒度的可持续间隔,某些浏览器的实现可以非常接近。

当我们对setInterval()设置0毫秒的延迟时,ie浏览器定时器的callback回调只会执行一次,和使用setTimeout效果一样。

浏览器不保证我们指定的延迟间隔,虽然可以指定特定的延迟值,但其准确性却并不总是能够保证,尤其是在延迟值很小的时候。

8.3 处理昂贵的计算过程

js的单线程本质可能是js复杂应用程序开发中的最大“陷阱”。在js执行的时候,页面渲染的所有更新操作都要暂停。

如果要保持界面有良好的响应能力,减少运行时间超过几百毫秒的复杂操作,将其控制在可管理状态是非常必要的。

如果一段脚本的运行时间超过5秒,有些浏览器将弹出一个对话框警告用户该脚本“无法响应”。iPhone上的浏览器,将默认终止运行时间超过5秒钟的脚本。

作为定时器,它在一段时间之后,可以有效暂停一段js代码的执行,定时器还可以将代码的各个部分,分解成不会让浏览器挂掉的碎片。

考虑到这一点,我们可以将强循环和操作转化为非阻塞操作。

示例8.2 一个长时间运行的任务

var tbody = document.getElementsByTagName('tbody')[0];

for(var i=0; i<20000; i++){

var tr = document.createElement('tr');

for(var t=0; t<6; t++){

var td = document.createElement('td');

td.appendChild(document.createTextNode(i+','+t));

tr.appendChild(td);

}

tbody.appendChild(tr)

}

上例创建了240000个DOM节点,并使用大量的单元格来填充一个表格。这是非常昂贵的操作,明显会增加浏览器的执行时间,从而阻止正常的用户交互操作。

我们可以引入定时器,在代码执行的时候定期暂停休息

示例8.3 利用定时器分解长时间运行的任务

var tbody = document.getElementsByTagName('tbody')[0];

var rowCount = 20000;

var divideInto = 4;

var chunkSize = rowCount/divideInto;

var iteration = 0;

setTimeout(function generateRows(){

var base = (chunkSize)*iteration;

for(var i=0; i

var tr = document.createElement('tr');

for(var t=0; t<6; t++){

var td = document.createElement('td');

td.appendChild(document.createTextNode((i+base)+','+t+','+iteration));

tr.appendChild(td)

}

tbody.appendChild(tr);

}

iteration++;

if(iteration

setTimeout(generateRows,0)

}

},0);

上例将操作分成四步小操作,每个操作创建自己的DOM节点。这些较小的操作,则不太可能让浏览器挂掉。

8.4 中央定时器控制

使用定时器可能出现的问题是对大批量定时器的管理。

同时创建大量的定时器,将会在浏览器中增加垃圾回收任务的可能性。垃圾回收就是浏览器遍历其分配过的内存,并试图删除没有任何应用的未使用对象的过程。定时器是一个特殊的问题,因为通常它们是在js单线程引擎之外的流程中进行管理。有些浏览器可以很好地处理这种情况,有些浏览器的垃圾回收周期则很长。一个动画在某个浏览器中很漂亮、很流畅,但在另外一个浏览器中却很卡顿。

在多个定时器中使用中央定时器控制,可以带来很大的威力和灵活性。

.每个页面在同一时间只需要运行一个定时器。

.可以根据需要暂停和恢复定时器。

.删除回调函数的过程变得很简单。

示例8.4 管理多个处理程序的中央定时器控制

test suite

#box{position:absolute;width:60px;height:40px;border:1px solid #060; text-align:center;}

Hello!

var timers={

timerID:0,

timers:[],

add:function(fn){

this.timers.push(fn);

},

start:function runNext(){

if(this.timerID) return;

(function(){

if(timers.timers.length > 0){

for(var i=0; i

if(timers.timers[i]() === false){

timers.timers.splice(i,1);

i--

}

}

timers.timerID = setTimeout(runNext,0)

}

})()

},

stop:function(){

clearTimeout(this.timerID);

this.timerID=0;

}

}

var box = document.getElementById('box'),x=0,y=20;

timers.add(function(){

box.style.left = x + 'px';

if(++x>50) return false;

})

timers.add(function(){

box.style.top = y+'px';

y+=2;

if(y>120) return false;

})

timers.start();

一开始,所有的回调函数都存储于一个名为timers的数组中,还包含当前定时器的一个ID,这些变量是定时器唯一需要维护的内容。

add()方法接受一个callback回调,并简单将其添加到timers数组中。

start()方法首先确认没有定时器在运行(通过检查timerID是否有值),如果确认没有定时器在执行,立即执行一个即时函数来开启中央定时器。

在即时函数内,如果注册了处理程序,就遍历执行每个处理程序。如果有处理程序返回false,我们就从数组中将其删除,最后进行下一次调度。

以这种方式组织定时器,可以确保回调函数总是按照添加的顺序进行执行。而普通的定时器通常不会保证这种顺序,有可能后面的一个处理程序在前面就执行了。

这种方式的定时器组织,对于大型应用程序或任何形式的js动画来说都是至关重要的。

8.5 异步测试

示例:简单的异步测试套件

(function(){

var queue = [],paused=false;

this.test = function(fn){

queue.push(fn);

runTest();

}

this.pause = function(){

paused = true;

}

this.resume = function(){

paused = false;

setTimeout(runTest,1)

}

function runTest(){

if(!paused && queue.length){

queue.shift();

if(!paused) resume();

}

}

})()

示例中,传递给test()方法的每个函数,最多只包含一个异步测试。它们的异步性由pause()和resume()的使用所定义,这两个方法分别在异步事件之前或之后进行调用。这段代码是一种确保让包含异步行为的函数,以特定的顺序进行执行的方式。

该队列唯一的目的是在等待执行的时候,出列一个函数并进行执行。否则,就完全停止运行一个时间间隔。

这段代码,强制测试套件以纯粹异步方式进行执行,但同时又保证了测试执行的顺序。

本文由9159.com发布于前端,转载请注明出处:如果我们在非浏览器环境中使用js,用它们来分别

关键词:

上一篇:没有了
下一篇:没有了