新浦京81707con > 首页 > 新萄京网址线路检测管理页面的,驯服线程和定

原标题:新萄京网址线路检测管理页面的,驯服线程和定

浏览次数:181 时间:2019-05-02

管理页面包车型大巴 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 模块。于是作者就在动脑筋是不是创设3个跟第1方框架非亲非故并且又能够在第三方框架上使用的 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

机械漏刻提供了1种让1段代码在一定微秒之后,再异步推行的技巧。由于js是单线程的性状(同权且间只好试行壹处js代码),机械漏刻提议了壹种跳出那种限制的不二等秘书籍,以一种不太直观的格局来进行代码。

总结

多谢阅读完本文章的读者。本文仅表示个人观点,希望能支持到有连锁难题的相爱的人,若是本文有不妥之处请不吝赐教。

1 赞 4 收藏 评论

新萄京网址线路检测 3

八.1 放大计时器和线程是什么样行事的

八.壹.一 设置和清除沙漏

js提供了二种方法,用于创建电磁照看计时器以及多个照拂的排除方法(删除)。这个措施是window对象(全局上下文)上的章程。

id = setTimeout(fn,delay) 运转三个停车计时器,在一段时间(delay)之后试行传入的callback,并重临该计时器的不今不古标记

clearTimeout(id) 倘诺反应计时器还未接触,传入电火花计时器标记就可以收回(清除)该停车计时器

id = setInterval(fn,delay) 运营五个定时器,在每隔一段时间之后都试行传入的callback,并重临该沙漏的唯一标记

clearInterval(id) 传入间隔计时器标记,就能够收回该区间定时器

js机械漏刻的延迟时间是不可能确认保障的,原因和js线程的原形有十分大关系。

捌.一.贰 实施线程中的机械漏刻实施

在Web worker可用从前,浏览器中的全部js代码都以在单线程中实践的,是的,唯有两个线程。

管理程序在实行时必须进行排队试行,并且3个管理程序并不可能暂停别的1个管理程序的实行。

8.一.三 timeout与interval之间的区分

示范八.一 二种创立重复计时器的法子

setTimeout(function repeatMe(){  //定义叁个timeout沙漏,每拾飞秒都再一次调用自身

//code

setTimeout(repeatMe,10)

},10)

setInterval(function(){  //定义2个interval计时器,每十纳秒都触发一回

//code

},10)

在setTimeout()代码中,要在前贰个callback回调施行完成并延迟十秒未来,才干重新实践setTimeout()。

而setInterval()则是每隔十微秒就尝试进行callback回调,而不关注上一个callback是何时实践的。

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

.若是不可能即时实践停车计时器,该反应计时器会被推移到下三个可用的推行时间点上(或然越来越长,但不会比钦点的延迟时间越来越少)。

.固然向来被推迟,到结尾,interval间隔机械漏刻恐怕会无延迟试行,并且同二个interval管理程序的两个实例无法而且展开排队。

.setTimeout()和setInterval()在触及同期的定义上是一心两样的。

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

今世浏览器平时不可能兑现一微秒粒度的可不止间隔,有个别浏览器的兑现能够分外左近。

当大家对setInterval()设置0飞秒的延期时,ie浏览器电火花计时器的callback回调只会推行2遍,和选取setTimeout效果等同。

浏览器不保障我们钦点的推移间隔,即便能够钦赐特定的延迟值,但其准确性却并不总是能够确认保障,特别是在延迟值非常的小的时候。

八.三 管理昂贵的一个钱打二拾陆个结进度

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

设若要保全界面有能够的响应才干,收缩运作时刻超越几百阿秒的繁杂操作,将其决定在可治本状态是特出须要的。

固然1段脚本的运转时刻超越⑤秒,某个浏览器将弹出四个会话框警告用户该脚本“十分的小概响应”。BlackBerry上的浏览器,将暗许终止运转时刻超越五分钟的剧本。

作为电磁关照计时器,它在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节点,并行使多量的单元格来填充八个表格。那是可怜高昂的操作,分明会大增浏览器的执行时间,从而阻碍不奇怪的用户交互操作。

本文由新浦京81707con发布于首页,转载请注明出处:新萄京网址线路检测管理页面的,驯服线程和定

关键词: 新浦京81707con javascript 橙子学院-30... 技术干货

上一篇:强大的Java前台后台开发工具,页面制作之开发调

下一篇:没有了