JSで実装した簡単なタイマー関数例を詳しく解説

タイマーはコードフラグメントの実行を非同期に遅らせる機能を提供します。javascriptは本質的にシングルスレッドです(特定の時間範囲内で実行できるのはJSコードの一部だけです)。タイマーはこれを回避する方法を提供します。メソッドを使用することで、コードを実行する別の方法が開かれます。

最近、私は WeChat 上で、雪の結晶、期間限定のクリックで賞品獲得、期間限定のパズル、期間限定の回答の質問など、インタラクティブなミニゲームをたくさん書きました。これらはすべて期間限定の「ゲーム」です。 (実際にはゲームとはみなされていません。せいぜいちょっと面白い程度です) ほんのちょっとしたやりとりです)

制限時間は 4 つあります、はい、そうです、ここに記録されているのは最近書き込まれた「タイマー」です...

そうですね、タイマーは 1 つの 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 中国語 Web サイトの他の関連記事を参照してください。