Explication détaillée d'exemples simples de fonctions de minuterie implémentées dans JS

Timer offre la possibilité de retarder de manière asynchrone l'exécution de fragments de code. javascript est intrinsèquement monothread (seule une partie du code js peut s'exécuter dans une certaine plage de temps). un moyen de contourner cette limitation, ouvrant ainsi une autre façon d'exécuter le code.

J'ai récemment écrit de nombreux mini-jeux interactifs sur WeChat, tels que des flocons de neige, des clics à durée limitée pour gagner des prix, des puzzles à durée limitée, des questions à réponse à durée limitée, etc. des « jeux » temporels (en fait, ils ne sont pas considérés comme des jeux, tout au plus ce sont juste une petite interaction divertissante)

Il y a 4 limites de temps limitées, oui, c'est vrai, ce qui est enregistré ici est le « minuteur » récemment écrit '...

Eh bien, timer Il peut être implémenté avec un seul setInterval ou setTimeout, et le code ne dépassera pas dix lignes !

Mais avec la mentalité de chercher les ennuis, écrivons une minuterie réutilisable

1 Elle peut compter à rebours ou compter en avant

2. fonction

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

Méthode d'appel :

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

Saisissez ici La méthode setStr est la traitement de la chaîne avant que l'heure actuelle calculée par le compteur ne soit écrite sur ele

Que le compte à rebours soit un compte à rebours, la valeur par défaut est l'heure d'avancement

L'heure actuelle peut être obtenue via timerO.timeV

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!