Detailed explanation of simple timer function examples implemented in JS

The timer provides the ability to asynchronously delay the execution of code fragments. javascript is born single-threaded (only part of the js code can run within a certain time range). The timer provides us with provides a way to circumvent this limitation, thereby opening up another way to execute the code.

Recently I have written a lot of interactive mini-games on WeChat, such as snowflakes, limited-time clicks to win prizes, limited-time puzzles, limited-time answer questions, etc. They are all limited-time 'games' (actually not considered games, at most they are Just a little entertaining interaction)

There are 4 limited time limits on it, yes, that’s right, what is recorded here is the recently written 'timer'...

Well, timer It can be implemented with just one setInterval or setTimeout, and the code will not exceed ten lines!

But just because you have nothing to do, let’s write a timer that can be reused

1. It can count down or count forward

2.Reset and pause , stop, start function

//计时器
window.timer = (function(){
  function mod(opt){
    //可配置参数 都带有默认值
    //必选参数
    this.ele = typeof(opt.ele)=='string'?document.getElementById(opt.ele):opt.ele;//元素
    //可选参数
    this.startT = opt.startT||0;//时间基数
    this.endT = opt.endT=='undefined'?24*60*60:opt.endT;//结束时间 默认为一天
    this.setStr = opt.setStr||null;//字符串拼接
    this.countdown = opt.countdown||false;//倒计时
    this.step = opt.step||1000;
    //不可配置参数
    this.timeV = this.startT;//当前时间
    this.startB = false;//是否启动了计时
    this.pauseB = false;//是否暂停
    this.init();
  }
  mod.prototype = {
    constructor : 'timer',
    init : function(){
      this.ele.innerHTML = this.setStr(this.timeV);
    },
    start : function(){
      if(this.pauseB==true||this.startB == true){
        this.pauseB = false;
        return;
      }
      if(this.countdown==false&&this.endT<=this.cardinalNum){
        return false;
      }else if(this.countdown==true&&this.endT>=this.startT){
        return false;
      }
      this.startB = true;
      var v = this.startT,
        this_ = this,
        anim = null;
      anim = setInterval(function(){
        if(this_.startB==false||v==this_.endT){clearInterval(anim);return false}
        if(this_.pauseB==true)return;
        this_.timeV = this_.countdown?--v:++v;
        this_.ele.innerHTML = this_.setStr(this_.timeV);
      },this_.step);
    },
    reset : function(){
      this.startB = false;
      this.timeV = this.startT;
      this.ele.innerHTML = this.setStr(this.timeV);
    },
    pause : function(){
      if(this.startB == true)this.pauseB = true;
    },
    stop : function(){
      this.startB = false;
    }
  }
  return mod;
})();

Calling method:

var timerO_1 = new timer({
      ele : 'BOX1',
      startT : 0,
      endT : 15,
      setStr : function(num){
        return num+'s';
      }
    });
var timerO_2 = new timer({
      ele : 'BOX2',
      startT : 30,
      endT : 0,
      countdown : true,
      step : 500,
      setStr : function(num){
        return num+'s';
      }
    });

The method setStr passed in here is String processing before the current time calculated by the counter is written to ele

Whether countdown is a countdown, the default is forward time

The current time can be obtained through timerO.timeV

The above is the detailed content of Detailed explanation of simple timer function examples implemented in JS. For more information, please follow other related articles on the PHP Chinese website!