JS로 구현된 간단한 타이머 함수 예제에 대한 자세한 설명

타이머는 코드 조각의 실행을 비동기적으로 지연시키는 기능을 제공합니다. javascript는 본질적으로 단일 스레드입니다(js 코드의 일부만 특정 시간 범위 내에서 실행될 수 있음). 메서드를 사용하면 코드를 실행할 수 있는 또 다른 방법이 열립니다.

최근에 저는 WeChat에서 눈송이, 상을 받기 위한 시간 제한 클릭, 시간 제한 퍼즐, 시간 제한 질문 답변 등과 같은 많은 대화형 미니 게임을 작성했습니다. 모두 시간 제한 '게임'입니다. (실제로는 게임으로 간주되지 않으며 기껏해야 약간 재미있습니다.) 단지 작은 상호작용일 뿐입니다)

4개의 시간 제한이 있습니다. 예, 그렇습니다. 여기에 기록된 것은 최근에 작성된 '타이머'입니다...

음, 타이머는 단 하나의 setInterval 또는 setTimeout으로 구현할 수 있지만 코드는 10줄을 넘지 않습니다!

하지만 문제를 찾는다는 마음으로 재사용 가능한 타이머를 작성하는 것이 좋습니다

1. 카운트다운 또는 카운트업이 가능합니다

2. 재설정, 일시정지, 중지, 시작 기능

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

:

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

여기에 전달된 setStr 메소드는 카운터에서 계산한 현재 시간이 ele에 기록되기 전의 문자열 처리입니다

카운트다운이 카운트다운인지 기본값은 전달 시간

현재 시간을 가져올 수 있습니다. TimerO.timeV를 통해

위 내용은 JS로 구현된 간단한 타이머 함수 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!