setTimeout、setIntervalの処理が簡単に書けるJSライブラリを作ってみた

setTimeout は " 指定ミリ秒後に処理を実行 "、setInterval は " 指定ミリ秒後に繰り返す処理を実行 " するjavascriptに用意されているメソッドです。

どちらのメソッドも頻繁には使用しませんが、「アニメーション」「遅延」などのイベント処理を書く時に利用することが多くなります。

そんな ' setTimeout '、' setInterval 'の処理を書きやすくする為の ラッパーを作ってみました。その名も「sst.js」です。
 

- Javascriptの 'setTimeout'、'setInterval' の処理が簡単に書ける

// sst.js を使ってsetTimeoutの処理を書く場合
sst(1, "min").once(function() {
  // 一分後に実行されます
});

// javascriptに用意されているsetTimeout関数を使って処理を書く場合
setTimeout(function(){
  // 一分後に実行されます
}, 60000);

sst.jsの入手はレポジトリからライブラリ本体をダウンロード、CDN経由で読み込み、又は コマンドライン上から' npm ' or  ' yarn ' コマンドを使ってインストールします。

# npm
npm install sstjs --save
# yarn
yarn add sstjs
# CDN
<script src="https://unpkg.com/sstjs/dist/sst.min.js"></script>

/* ライブラリの読み込み */
// node.js
const sst = require('sstjs')
// ES6
import sst from 'sstjs';
// CDN（ブラウザ）
<script src="https://unpkg.com/sstjs/dist/sst.min.js"></script>
// ライブラリを直接読み込み(ブラウザ)
<script src="sstjs/dist/sst.min.js"></script>

コンストラクタ

sst.jsは set ( Timeout || Interval ) と違い、 呼び出し時に 実行する時間を定義します。

// ミリ秒: ms, millisecond, milliseconds
sst(200, 'ms') // 200ミリ秒 (0.2秒)
// 秒: s, sec, second, seconds
sst(2, "sec") // 2秒
sst(0.2, "s") // 0.2秒
// 分: m, min, minute, minutes
sst(2, "min") // 2分

.once(callback)

' once 'メソッドは ' setTimeout 'と同等のメソッドです。メソッド内のコールバック関数が 指定時間後に実行されます。

sst(2, "sec")
  .once(function() {
    console.log("2秒後に実行されます");
  });

.times(num, callback)

' times ' メソッドも ' setTimeout ' と同等の動きをするメソッドですが、こちらは指定回数分だけコールバック関数が実行されます。

sst(2, "sec")
  .times(4, function () {
      console.log("2秒ごとに４回処理が実行されます");
    });

.after(beforeCallback, afterCallback)

' after ' メソッドは 第一引数のコールバック関数が実行されたのち、 第二引数のコールバック関数が指定時間後に実行されます。

sst(2, "sec")
  .after(
    function() {
      console.log("この処理はすぐに実行されます");
    },
    function() {
      console.log("この処理は2秒後に実行されます");
    }
  );

.repeat(callback)

' repeat 'メソッドは ' setInterval 'と同等のメソッドです。メソッド内のコールバック関数が 指定時間ごとに繰り返し実行されます。

sst(2, "sec")
  .repeat(function () {
      console.log("この処理は2秒ごとに繰り返し実行されます");
  });

.immediate(callback)

' immediate 'メソッドは コンストラクタで定義した時間(秒数) と関係なく、すぐにコールバック関数が実行されます。

sst(2, "sec")
  .immediate(function () {
    console.log('この処理はすぐに実行されます');
  })
  .repeat(function () {
    // 2秒後に実行
  });

以上がsst.jsの紹介でした。setTimeoutやsetIntervalのミリ秒が書きづらいと思っていた人には便利に使えるライブラリだと思われます。

GitHub : cupof-github/sstjs