用它们来分别存储需要管理的

暂停 & 恢复

近段时间,小编发掘众多政工都亟需「暂停」和「苏醒」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
饭馆上,风乐趣的校友能够移动:

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);

用它们来分别存储需要管理的。治本页面包车型地铁 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)});

总结

多谢阅读完本小说的读者。本文仅代表个人观点,希望能扶助到有相关难题的恋人,如若本文有不妥之处请不吝赐教。

1 赞 4 收藏
评论

用它们来分别存储需要管理的。

图片 2

时光轴驱动的 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,二维码如下:

图片 3

发表评论

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