条件が成立したときにアクションを実行するJavascriptリスナー関数を作成するにはどうすればよいですか？

Question

私はリスナーのための多くの必要性を与えているサードパーティ製のJavaScriptを使用しています。たとえば、特定のdivがロードされているとき、私はそれを使って何かしたい。それはオブジェクトのスタイルを変えるので、私はそれがあるスタイルを持つのを見る必要があります。 idやクラスが存在するときに動作する関数を構築しました。ここに現在のID関数があります。ご覧のとおり、jQueryが使用されています。

function whenLoaded(element_id, action) { 
    if ($(element_id)) { 
     action(); 
    } 
    else { 
     setTimeout("whenLoaded('"+element_ids+"',"+action+", '"+stop_on+"')", 500); 
    } 
} 

私は本当に複数の条件を付けることができるものが必要です。たとえば：

whenTrue(
    ($('popup') && $('popup').style.width == '500px'), 
    $('popup').style.width = '0' 
); 

条件（第1パラメータ）を再帰的に確認することが期待されます。これらの条件が満たされたら、アクションを実行します。

私はeval（）を使用してこれを達成できましたが、使用しないように警告されています。理由を覚えていません。それが言われている、私は別の方法でこれを達成したいと思います。

のeval（）ソリューション：

whenTrue(
    "($('popup') && $('popup').style.width == '500px')", 
    "$('popup').style.width = '0'" 
); 

function whenTrue(condition, action) { 
    if (eval(condition)) { 
     eval(action); 
    } 
    else { 
     setTimeout("whenTrue('"+condition+"','"+action+"')", 500); 
    } 
} 

Answer 1

function conditionListener(callback){ 
    if(typeof callback !== 'function') return; 

    var interval, callback = callback; 

    interval = setInterval(function() { 
     if(true /* some condition */){ 
      callback(); 
      clearInterval(interval); 
     } 
    }, 500); 
} 

var listener = new conditionListener(function() { 
    /* ... do work ... */ 
}); 

---

http://jsfiddle.net/M26XS/

Answer 2

私はそれはあなたが望むものを基本的にはないように見えた後、この関数を書いた：

function pollUntilTrue(conditionFunc, afterTrueFunc, timeout) { 
    var __xinterval = setInterval(function() { 
     var res = conditionFunc(); 
     if (res === true) { 
     clearInterval(__xinterval); 
     afterTrueFunc(); 
     } 
    }, timeout); 
    } 

あなたはこのようなあなたのコードでそれを使用します。

pollUntilTrue(function() { 
    return ($('popup') && $('popup').style.width == '500px'); 
}, 
function() { 
    $('popup').style.width = '0'; 
}, 500); 

あなたのニーズに合わせてタイムアウトを調整してください

あなただけの条件とアクションを受け入れないのはなぜ

Answer 3

？それははるかに簡単になります。

function whenTrue(condition, action) {  
    if (condition) {   
     action();  
    }  
    else { 
     setTimeout("whenTrue('"+condition+"',"+action+", '"+stop_on+"')", 500); 
} 

}

、その後、あなたは関数を呼び出すとき、それは次のようになり条件を提供することができます。

whenTrue(($('popup') && $('popup').style.width == '500px') && 
      $('popup').style.width === '0', someAction);