Detaillierte Erläuterung einfacher Beispiele für Timerfunktionen, die in JS implementiert sind

Der Timer bietet die Möglichkeit, die Ausführung von Codefragmenten asynchron zu verzögern. Javascript ist von Natur aus Single-Threaded (nur ein Teil des JS-Codes kann innerhalb eines bestimmten Zeitbereichs ausgeführt werden). eine Möglichkeit, diese Einschränkung zu umgehen und dadurch eine andere Möglichkeit zur Ausführung des Codes zu eröffnen.

Ich habe in letzter Zeit viele interaktive Minispiele auf WeChat geschrieben, wie zum Beispiel Schneeflocken, zeitlich begrenzte Klicks, um Preise zu gewinnen, zeitlich begrenzte Rätsel, zeitlich begrenzte Antwortfragen usw. Sie sind alle begrenzt. Zeit-'Spiele' (eigentlich keine Spiele, höchstens nur eine kleine unterhaltsame Interaktion)

Es gibt 4 begrenzte Zeitlimits, ja, das stimmt, was hier aufgezeichnet wird, ist der kürzlich geschriebene 'Timer' '...

Nun, timer Es kann mit nur einem setInterval oder setTimeout implementiert werden, und der Code wird zehn Zeilen nicht überschreiten!

Aber mit der Mentalität, nach Ärger zu suchen, schreiben wir einen wiederverwendbaren Timer

1. Er kann herunter- oder vorwärtszählen

2 Funktion

//计时器
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;
})();

Methode aufrufen:

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

Hier eingeben Die Methode setStr ist die String-Verarbeitung, bevor die vom Zähler berechnete aktuelle Zeit in ele geschrieben wird

Ob Countdown ein Countdown ist, der Standardwert ist Vorwärtszeit

Die aktuelle Zeit kann über timerO.timeV

abgerufen werden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung einfacher Beispiele für Timerfunktionen, die in JS implementiert sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!