如何创建一个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'
);

我希望它可以递归检查条件（第一个参数）。 当这些条件成立时，执行操作。

我已经可以使用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 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 2

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 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);