驯服线程和定时器,管理页面的

管理页面的 set提姆eout & setInterval

2017/09/28 · JavaScript
· setInterval,
settimeout

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

澳门葡京 1在管理
set提姆eout & setInterval 那八个 APIs
时,作者平日会在第一级(全局)成效域创造一个叫 timer
的目的,在它下边有八个数组成员 —— {sto, siv},用它们来分别存储必要管理的
set提姆eoutID / setIntervalID。如下:

JavaScript

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

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

在利用 set提姆eout / 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)
);

在页面必要 clear提姆eout \ clearInterval 的时候,那样调用:

JavaScript

// 批量清除 set提姆eout timer.sto.forEach(function(sto)
{clear提姆eout(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(set提姆eout / setIntervale /
clearTimeout / clearInterval)是不够用的。于是,作者对 timer
进行了扩充,使它兼具了「暂停」和「恢复生机」的机能,如下:

JavaScript

// 暂停所有的 set提姆eout & setInterval timer.pause(); // 復苏所有的
set提姆eout & 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章 驯服线程和定时器

(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();
*/

CreateJS 的启发

在行使 CreateJS 开发一些项目标进程中,作者发现经过安装
createjs.Ticker.paused = true / false,可以暂停/復苏 createjs.Tween
上的卡通。于是小编借用 createjs.Tween 模拟了 set提姆eout & 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

利用方法与原生的 set提姆eout & 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,很可能定时器就不存在了,须要团结完成协调的定时器版本。

代码如下: (function($) { (function($) {
$.preload = function(data, cfg) { return new Loader(data, cfg); }; var
maps = {}, on = $.event.add, un = $.event.remove, he…

时光轴驱动的 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

定时器提供了一种让一段代码在肯定毫秒之后,再异步执行的力量。由于js是单线程的性状(同一时间只好进行一处js代码),定时器提出了一种跳出那种范围的法子,以一种不太直观的办法来实施代码。

总结

谢谢阅读完本作品的读者。本文仅表示个人观点,希望能支援到有有关难点的爱侣,要是本文有不妥之处请不吝赐教。

1 赞 4 收藏
评论

澳门葡京 3

8.1 定时器和线程是怎么着工作的

8.1.1 设置和消除定时器

js提供了二种方式,用于创立定时器以及五个照应的排除方法(删除)。这几个艺术是window对象(全局上下文)上的不二法门。

id = set提姆eout(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 三种成立重复定时器的办法

set提姆eout(function repeatMe(){
 //定义一个timeout定时器,每10微秒都重复调用自己

//code

setTimeout(repeatMe,10)

},10)

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

//code

},10)

在set提姆eout()代码中,要在前一个callback回调执行完结并延迟10秒未来,才能重新实施set提姆eout()。

而setInterval()则是每隔10微秒就尝试举行callback回调,而不关切上一个callback是哪一天实施的。

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

.即便不可以及时实施定时器,该定时器会被延迟到下一个可用的举行时间点上(可能更长,但不会比指定的延迟时间更少)。

.如若一直被推移,到终极,interval间隔定时器可能会无延迟执行,并且同一个interval处理程序的七个实例不可以同时开展排队。

.set提姆eout()和setInterval()在接触同期的概念上是截然两样的。

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

现代浏览器日常不能完成1阿秒粒度的可不止间隔,某些浏览器的达成可以非凡类似。

当大家对setInterval()设置0飞秒的推迟时,ie浏览器定时器的callback回调只会履行三遍,和动用set提姆eout效果一样。

浏览器不保障大家指定的延时期隔,尽管可以指定特定的延迟值,但其准确性却并不三番五次可以有限匡助,越发是在延迟值很小的时候。

8.3 处理昂贵的测算进程

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

要是要维持界面有脍炙人口的响应能力,减弱运作时刻抢先几百阿秒的繁杂操作,将其控制在可管制状态是越发需求的。

假如一段脚本的运转时刻超越5秒,有些浏览器将弹出一个会话框警告用户该脚本“不可能响应”。三星上的浏览器,将默许终止运行时刻当先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()的采纳所定义,那两个点子分别在异步事件往日或将来进展调用。那段代码是一种保证让包涵异步行为的函数,以特定的种种举办实践的法门。

该队列唯一的目标是在等候执行的时候,出列一个函数并举办实施。否则,就全盘终止运转一个日子距离。

那段代码,强制测试套件以纯粹异步格局开展实践,但还要又有限支撑了测试执行的顺序。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website