如何创建一个javascript侦听器函数，该函数将在条件为true时执行操作

How do I create a javascript listener function that will perform an action when a condition is true?

本文关键字：函数 操作 条件 true 执行 侦听器 创建 何创建 javascript 一个      更新时间：2023-09-26

我使用的是一个第三方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);
    }
}

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/

我写过一次这个函数，看起来它基本上可以做你想要的：

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

调整超时以满足您的需求

为什么不接受一个条件和一个操作？那会让事情变得简单得多。

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);
相关文章：