JavaScript 変数の値の変化で実行される関数の作り方

Question

JavaScriptで、varで宣言された変数の値が
falseからTrueに変わったら実行される関数の作り方を探しております。
変数を監視しているようなものと言ったら良いのでしょうか。

【背景】
ソースコードに対する単体検証用テストベンチを作成しているのですが
変数の値の変化をトリガとして使いたいと考えています。

ご存知の方いらっしゃいましたら、よろしくお願い致します。

Answer 1

Object.defineProperty で setter を作成してみてはどうでしょうか。

'use strict';
(function () {
  var sample = (function (Object, Boolean) {
    var sample = Object.create(null),
        flag = false;

    Object.defineProperty(sample, 'flag', {
      set: function set (value) {
        value = Boolean(value);

        if (value !== flag) {
          console.log(flag + ' -> ' + value);
          flag = value;
        }
      },
      get: function get () {
        return flag;
      }
    });

    return sample;
  }(Object, Boolean));

  console.log(sample.flag); // false
  sample.flag = false;
  sample.flag = true;   // false -> true
  sample.flag = false;  // true -> false
}());

Re: utog さん

Comments

[allll]

ご回答いただき、ありがとうございました！
提案頂いた内容で無事、動作確認ができ助かりました^^
また何かありましたら、よろしくお願いします。

Answer 2

全体像が見えてないのでピンポイントでこれというものは無いのですが、ライブラリは自由に選べる変数の作りは自由に出来るという前提であれば、 Polymer/observe-js を使うとすっきり書けそうな気がします。

手前味噌ですが、以前書いた記事をどうぞ。 observe-jsを利用して分かりやすく非同期のFIFOを実装してみる

Comments

[allll]

さっそくご回答頂き、ありがとうございます。
記事を拝見したところ
>現時点でサポートしているブラウザはChrome36以上のみ
ということなのですが、検証環境がIEとなっておりますので
こちらの回答では難しそうです。申し訳ありません。

単純にvarで宣言された変数の値の変化をとりたいと考えております。
もし何かご存知でしたら、よろしくお願いします。

[nobuhito]

ネイティブなものはChrome36以上ですが、Polymer/observe-jsを使うと他のブラウザでも同じ動作をさせることが出来るというものです。変数単独となると対応出来ませんが。

あとは setTimeout でこまめにチェックするかですかね？

Answer 3

以下のような形だといかがでしょうか？

(function(){
  var target = false;

  // targetを監視してtrueになったら関数を実行
  (function observe(){
    if (target == false) {
        setTimeout(observe, 1);
    } else {
        // 関数実行
      execute();
    }
  })();

  // trueになったら実行する処理
  function execute(){
    console.log("実行");
  }

  // 試しに5秒後にtargetをtrueにしてみる
  setTimeout(function(){
    target = true;
  }, 5000);
})();

Comments

[allll]

ご回答いただき、ありがとうございます。
確かに、この方法でも可能ですね！勉強になりました^^