Mach3.laBlog

細かすぎて伝わらないjQuery拡張 (11) “$.observe” – Advent Calendar 2016

この記事は賞味期限切れです。(更新から1年が経過しています)

$.observe() は、コールバック関数を渡してその返り値を監視する関数です。

$.observe(callback, interval, timeout)

使い方

$.observe(function(){
    // "#demo" が存在するかどうか監視
    return !! $("#demo").length;
})
.then(
    function(){
        // "#demo" が見つかった場合に文字列を流し込む
        $("#demo").text("Hello, World !");
    },
    function(){
        // 時間内に "#demo" が見つからなかった
        console.log("timeout");
    }
);


setTimeout(function(){
    $("<div>", {id: "demo"}).appendTo("body");
    // "Hello, World !" が挿入した要素に流し込まれる
}, 30000);
  • Boolean値を返すコールバックを渡してインターバルで回して監視します
  • Deferredオブジェクトが返されるので、.done/fail().then() 等で失敗時・成功時の処理を書いておきます
  • $.observe() の第二引数には監視のインターバル(初期値: 33ミリ秒)、第三引数には監視のタイムアウト(初期値: 60000ミリ秒=1分)を渡すことができます
  • 成功時・失敗時の処理は一回だけしか呼ばれません。

コード

$.observe = function(callback, interval, timeout){
    var o = {
        interval: interval || 33,
        timeout: timeout || 60000,
        callback: callback,

        df: $.Deferred(),
        timer: null,
        start: null,
        now: function(){
            return (new Date()).getTime();
        },

        run: function(){
            clearTimeout(this.timer);
            if(callback()){
                return this.df.resolve();
            }
            if((this.now() - this.start) >= timeout){
                return this.df.reject();
            }
            this.timer = setTimeout(this.run, this.interval);
        }
    };

    o.start = o.now();
    o.run = o.run.bind(o);
    o.run();

    return o.df;
};

非同期で読み込まれる外部ウィジェットを監視したりするのに使えるかもしれません。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*