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

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

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

sst.jsで出来ること

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

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

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

 

sst.jsのインストール

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の使い方

コンストラクタ

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秒ごとに4回処理が実行されます");
    });


.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秒後に実行
  });


Summary

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

GitHub : cupof-github/sstjs

 

この記事のカテゴリ

プログラミング

この記事のタグ

jsライブラリー , javascript , nodejs

Socialシェアボタン

スポンサーリンク