APIbeta

计时器

Introduce

libs提供了timer工具, 可以用于安全计时器, 防止页面消失后,计时器忘记删除的问题.

Example

如果在vue中, 自动会在vue对象中注入 $bpTimer 对象.

可以按如下的方式使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>

export default class extends Vue {

  // use timer.
  mounted() {
    // 1. timeout.
    let t = this.$timer.setTimeout(()=>{
      // do somthing.
    }, 1000);

    this.$timer.clearTimeout(t);

    // 2. promise.
    this.$timer.sleep(1000)
              .then(()=>{
                // do somthing.
              });
  }
}

</script>

接口

timer接口如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
* @desc 
*    可在组件释放时自动释放所有的timeout计时器.
*     - 在created中:             this.timer = new Timer();
*     - 在beforeDestroy中:       this.timer.dispose();
*     - 在使用计时器的函数中调用:   
                                var t = this.timer.setTimeout(fn, tm);
                                this.timer.clearTimeout(t);
                                this.timer.clearAllTimeout();
*     - 在使用帧动画的函数中调用:   
                                var t = this.timer.requestAnimationFrame(fn);
                                this.timer.cancelAnimationFrame(t);
                                this.timer.clearAllAnimationFrame();
*     - 使用Promise方式启动计时器: (会在对象释放前安全停止)
                                this.timer.sleep(1000)
                                .then(()=>{
                                });
*/
class Timer {
  constructor();

  /**
    * @desc 注销计时器, 停止并删除所有在运行中的timer.
    */
  dispose():void;

  /**
  * @desc: Promise方式计时器.(会在对象释放前安全停止)
  * @return: Promise
  */
  sleep(ms:number):Promise<void>;

  /**
  * @desc: 启动计时器.
  */
  setTimeout(fn:()=>void, tm:number):NodeJS.Timeout;

  /**
  * @desc: 清除计时器.
  */
  clearTimeout(t:NodeJS.Timeout):void;

  /**
  * @desc: 启动计时器.
  */
  setInterval(fn:()=>void, tm:number):NodeJS.Timeout;

  /**
  * @desc: 清除计时器.
  */
  clearInterval(t:NodeJS.Timeout):void;
  
  /**
  * @desc: 启动帧动画.
  */
  requestAnimationFrame(fn:(tm:number)=>void):number;

  /**
  * @desc: 清除帧动画.
  */
  cancelAnimationFrame(t:number):void;

  /**
  * @desc: 清除所有计时器.
  */
  clearAllTimeout():void;

  /**
  * @desc: 清除所有计时器.
  */
  clearAllInterval():void;
  
  /**
  * @desc: 清除所有帧动画.
  */
  clearAllAnimationFrame():void;
  
  /**
  * @desc: 清除所有计时器与帧动画.
  */
  clearAll():void;
}
← 0基础库