图片 3

js忍者法门,管理页面的

管住页面包车型的士 setTimeout & setInterval

2017/09/28 · JavaScript
· setInterval,
settimeout

原稿出处:
坑坑洼洼实验室   

图片 1在保管
setTimeout & setInterval 那八个 APIs
时,作者常常会在甲级(全局)功能域创制3个叫 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目的下边挂载陆个基础的 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钦定1组同样配置
{
type : ‘css’,
urls : [‘4.css’, ‘5.css’]
}], {
// 加载结束后调用
onFinish : fn,
// 加载超时
timeout : 50
});
// 开首预加载
loader.start();
loader.stop();
// 暂停预加载
loader.pause();
loader.resume();
// 实时加载
loader.load();
*/

第七章 驯服线程和放大计时器

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 中去除 set提姆eout
成员,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

计时器提供了1种让1段代码在必然纳秒之后,再异步实施的力量。由于js是单线程的表征(同一时半刻间只好进行1处js代码),计时器提议了壹种跳出那种范围的方法,以1种不太直观的法子来实践代码。

总结

感激阅读完本小说的读者。本文仅代表个人观点,希望能支援到有连带主题素材的朋友,若是本文有不妥之处请不吝赐教。

1 赞 4 收藏
评论

图片 3

八.一 电火花计时器和线程是什么行事的

八.一.壹 设置和化解反应计时器

js提供了二种格局,用于创立停车计时器以及七个照料的铲除方法(删除)。那几个主意是window对象(全局上下文)上的措施。

id = setTimeout(fn,delay)
运维两个定时器,在1段时间(delay)之后实施传入的callback,并重临该反应计时器的并世无双标记

clearTimeout(id)
假若电磁料理计时器还未接触,传入定时器标志就能够收回(清除)该电磁打点计时器

id = setInterval(fn,delay)
运转三个电磁照应计时器,在每隔一段时间之后都实施传入的callback,并重返该停车计时器的唯一标记

clearInterval(id) 传入间隔电磁照应计时器标志,就能够收回该距离反应计时器

js机械漏刻的延迟时间是无法确定保障的,原因和js线程的本来面目有相当大关系。

八.一.二 实行线程中的机械漏刻实践

在Web
worker可用在此之前,浏览器中的全数js代码都是在单线程中奉行的,是的,唯有三个线程。

管理程序在举行时必须进行排队试行,并且多个管理程序并不能暂停其余一个管理程序的实践。

⑧.一.三 timeout与interval之间的分别

示范八.一 二种成立重复机械漏刻的点子

setTimeout(function repeatMe(){
 //定义3个timeout放大计时器,每拾微秒都重复调用本人

//code

setTimeout(repeatMe,10)

},10)

setInterval(function(){  //定义一个interval沙漏,每10微秒都触发1次

//code

},10)

在setTimeout()代码中,要在前多少个callback回调实施完结并延迟拾秒未来,技能重新推行setTimeout()。

而setInterval()则是每隔10微秒就尝试施行callback回调,而不关注上三个callback是曾几何时实施的。

.js引擎是单线程实行,异步事件必须求排队等候才干实行

.要是不能够及时执行放大计时器,该沙漏会被延缓到下八个可用的推行时间点上(也许越来越长,但不会比钦赐的延迟时间越来越少)。

.假若向来被延迟,到最终,interval间隔停车计时器恐怕会无延迟推行,并且同贰个interval管理程序的八个实例无法同时拓展排队。

.setTimeout()和setInterval()在接触同期的概念上是一点1滴两样的。

八.二 计时器延迟的最小化及其可信性

当代浏览器常常不可能落成一微秒粒度的可不断间隔,有个别浏览器的贯彻能够13分类似。

当大家对setInterval()设置0飞秒的延期时,ie浏览器电磁照管计时器的callback回调只会实践3回,和使用setTimeout效果一样。

浏览器不保障大家钦赐的推迟间隔,就算能够内定特定的延迟值,但其正确性却并不再而三能够有限协理,特别是在延迟值相当的小的时候。

8.三 管理昂贵的测算进度

js的单线程本质恐怕是js复杂应用程序开荒中的最大“陷阱”。在js实践的时候,页面渲染的持有更新操作都要刹车。

若是要有限帮忙分界面有美丽的响应手艺,裁减运作时刻超越几百飞秒的繁杂操作,将其调整在可治本状态是不行要求的。

若果一段脚本的运作时刻当先伍秒,有个别浏览器将弹出一个会话框警告用户该脚本“无法响应”。酷派上的浏览器,将暗中认可终止运营时刻当先伍分钟的脚本。

用作沙漏,它在1段时间之后,能够使得暂停1段js代码的实施,计时器还足以将代码的相继部分,分解成不会让浏览器挂掉的零碎。

思索到这或多或少,大家能够将强循环和操作转化为非阻塞操作。

以身作则八.二 一个长日子运作的任务

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)

}

上例创建了贰四千0个DOM节点,并选拔多量的单元格来填充三个表格。那是11分高昂的操作,分明会扩展浏览器的试行时间,从而阻碍寻常的用户交互操作。

咱们得以引进机械漏刻,在代码施行的时候定时暂停休息

示范八.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);

上例将操作分成4步小操作,各样操作创制本身的DOM节点。那个不大的操作,则不太也许让浏览器挂掉。

8.4 核心停车计时器调整

利用停车计时器恐怕出现的难题是对多量电火花计时器的保管。

而且成立大气的计时器,将会在浏览器中扩大垃圾回收职务的只怕。垃圾回收即是浏览器遍历其分配过的内部存储器,并图谋删除未有此外利用的未使用对象的长河。计时器是2个破例的标题,因为一般来说它们是在js单线程引擎之外的流程中张开保管。有些浏览器能够很好地拍卖那种景况,有个别浏览器的垃圾回收周期则非常短。2个动画在有个别浏览器中极美、很通畅,但在此外二个浏览器中却很卡顿。

在五个放大计时器中使用中心放大计时器调整,能够带来极大的威力和灵活性。

.各类页面在同一时半刻间只要求周转三个停车计时器。

.能够依赖须求暂停和恢复生机放大计时器。

.删除回调函数的长河变得很简短。

演示八.肆 管理五个管理程序的中心放大计时器调控

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的数组中,还包罗当前电火花计时器的2个ID,那些变量是计时器唯1供给爱慕的内容。

add()方法接受二个callback回调,并简要将其加多到timers数组中。

start()方法首先明确没有反应计时器在运行(通过检查timerID是不是有值),假设确认未有停车计时器在执行,马上试行3个即时函数来开启中心停车计时器。

在及时函数内,就算注册了管理程序,就遍历实施种种管理程序。即使有处理程序重回false,大家就从数组中校其删除,最终进行下三回调解。

以那种措施组织机械漏刻,能够保障回调函数总是依据增多的一1实行实行。而普通的计时器常常不会确认保障那种顺序,有相当大希望后边的三个管理程序在日前就进行了。

这种方法的放大计时器社团,对于大型应用程序或别的形式的js动画来讲都以重视的。

8.五 异步测试

演示:轻便的异步测试套件

(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()方法的各种函数,最五只含有1个异步测试。它们的异步性由pause()和resume()的使用所定义,那八个主意分别在异步事件从前或未来展开调用。那段代码是一种保证让包括异步行为的函数,以特定的逐1举办施行的法子。

该队列唯一的目标是在等候实行的时候,出列三个函数并张开实践。不然,就全盘停下运作一个时光间隔。

那段代码,强制测试套件以纯粹异步格局进行施行,但与此同时又保险了测试实践的依次。