js 定时器 Timer

 
 
  1 /* Timer 定时器 
  2 
  3 parameter:
  4     func: Function; //定时器运行时的回调; 默认 null
  5     speed: Number; //延迟多少毫秒执行一次 func; 默认 3000;
  6     step: Integer; //执行多少次: 延迟speed毫秒执行一次 func; 默认 Infinity;
  7     isStart: bool; //初始化时是否自动启动一次计时器(前提是 func 已被定义); 默认 true
  8 
  9 attribute:
 10     func, speed, step;    //这些属性可以随时更改;
 11 
 12     //只读属性
 13     readyState: String;    //定时器状态; 可能值: '', 'start', 'running', 'done'; ''表示定时器从未启动
 14     number: Number;        //运行的次数
 15 
 16 method:
 17     start(func, speed): this;    //启动定时器 (如果定时器正在运行则什么都不会做)
 18     restart(): undefined;        //重启定时器
 19     stop(): undefined;            //停止定时器
 20 
 21 demo:
 22     //每 3000 毫秒 打印一次 timer.number, 重复 Infinity 次;
 23     new Timer(timer => console.log(timer.number), 3000, Infinity);
 24 
 25 */
 26 class Timer{
 27 
 28     #restart = -1;
 29     #speed = 0;
 30     #isRun = false;
 31     #i = 0;
 32     #readyState = ''; //start|running
 33     //#paused = -1;
 34 
 35     get number(){
 36         return this.#i;
 37     }
 38     
 39     get readyState(){
 40         return this.#i >= this.step ? 'done' : this.#readyState;
 41     }
 42 
 43     /* get paused(){
 44         return this.#paused !== -1;
 45     }
 46 
 47     set paused(v){
 48         if(v === true){
 49             
 50             if(this.#i < this.step){
 51                 if(this.#paused === -1) this.#paused = this.#i;
 52                 this.stop();
 53             }
 54 
 55         }
 56 
 57         else if(this.#paused !== -1){
 58             this.restart();
 59             this.#i = this.#paused;
 60             this.#paused = -1;
 61 
 62         }
 63 
 64     } */
 65 
 66     constructor(func = null, speed = 3000, step = 1, isStart = true){
 67         this.func = func;
 68         this.speed = speed;
 69         this.step = step;
 70         //this.onDone = null;
 71     
 72         if(isStart === true && this.func !== null) this.restart();
 73 
 74     }
 75 
 76     copy(timer){
 77         this.func = timer.func;
 78         this.speed = timer.speed;
 79         this.step = timer.step;
 80         return this;
 81     }
 82 
 83     clone(){
 84         return new this.constructor().copy(this);
 85     }
 86 
 87     start(func, time){
 88         if(typeof func === 'function') this.func = func;
 89         if(UTILS.isNumber(time) === true) this.speed = time;
 90         this.restart();
 91 
 92         return this;
 93     }
 94 
 95     restart(){
 96         if(this.#isRun === false){
 97             setTimeout(this._loop, this.speed);
 98             this.#isRun = true;
 99             this.#restart = -1;
100             this.#i = 0;
101             this.#readyState = 'start';
102             
103         }
104 
105         else{
106             this.#restart = Date.now();
107             this.#speed = this.speed;
108 
109         }
110 
111     }
112 
113     stop(){
114         if(this.#isRun === true){
115             this.#restart = -1;
116             this.#i = this.step;
117         }
118 
119     }
120 
121     _loop = () => {
122 
123         //重启计时器
124         if(this.#restart !== -1){
125             
126             let gone = Date.now() - this.#restart;
127             this.#restart = -1;
128             
129             if(gone >= this.#speed) gone = this.speed;
130             else{
131                 if(this.#speed === this.speed) gone = this.#speed - gone;
132                 else gone = (this.#speed - gone) / this.#speed * this.speed;
133             }
134             
135             setTimeout(this._loop, gone);
136             
137             this.#i = 1;
138             if(this.func !== null) this.func(this);
139 
140         }
141 
142         //正在运行
143         else if(this.#i < this.step){
144 
145             setTimeout(this._loop, this.speed);
146 
147             this.#i++;
148             if(this.#readyState !== 'running') this.#readyState = 'running';
149             if(this.func !== null) this.func(this);
150 
151         }
152 
153         //完成
154         else this.#isRun = false;
155 
156     }
157 
158 }
完整代码

 

parameter:
    func: Function; //定时器运行时的回调; 默认 null
    speed: Number; //延迟多少毫秒执行一次 func; 默认 3000;
    step: Integer; //执行多少次: 延迟speed毫秒执行一次 func; 默认 Infinity;
    isStart: bool; //初始化时是否自动启动一次计时器(前提是 func 已被定义); 默认 true

attribute:
    func, speed, step;  //这些属性可以随时更改;

    //只读属性
    readyState: String; //定时器状态; 可能值: '', 'start', 'running', 'done'; ''表示定时器从未启动
    number: Number;     //运行的次数

method:
    start(func, speed): this;   //启动定时器 (如果定时器正在运行则什么都不会做)
    restart(): undefined;       //重启定时器
    stop(): undefined;          //停止定时器

demo:
    //每 3000 毫秒 打印一次 timer.number, 重复 Infinity 次;
    new Timer(timer => console.log(timer.number), 3000, Infinity);
 
 
posted @ 2022-05-28 14:07  鸡儿er  阅读(719)  评论(0)  编辑  收藏  举报