如何运行setTimeout（）直到发生特定事件？

Question

单击时，我要检查foo是否具有bar类，如果没有，请在5秒钟后再次检查，然后执行操作并停止检查。

jQuery(document).ready(function($) {
  $( "#foo" ).click(function() {
    function bar(){
      if $(this).hasClass('bar') {
        return true;
      } else {
    setTimeout(bar, 5000);
      }
    }  
  });
});

我试图创建一个名为bar的函数，该函数检查foo是否具有bar类，如果没有，则等待5秒钟，然后重试。一旦foo被点击，我就会执行此操作，但是某些操作不起作用。

如何检查div是否已上课，如果不每5秒钟检查一次，直到执行该操作，再执行一次操作？

Answer 1

要连续运行某些逻辑，请使用间隔而不是计时器。要清除间隔，请保存对它的引用，然后在满足相关条件时调用clearInterval()。像这样的东西：

jQuery(document).ready(function($) {
  var $foo = $('#foo'),
    interval;

  function bar() {
    if ($foo.hasClass('bar')) {
      console.log('class added!');
      clearInterval(interval);
    }
  }

  $foo.click(function() {
    clearInterval(interval);
    if (!$foo.hasClass('bar'))
      interval = setInterval(bar, 5000);
  });
});

然而应该指出，实现所需条件的更好方法是使用MutationObserver，该方法将在添加类时触发逻辑，而无需不断轮询DOM。

Here是详细说明如何完成的答案。

Answer 2

您有一些语法问题，您不会调用bar，因此它永远不会运行，并且与此有关的问题是setTimeout将范围更改为window的。

jQuery(document).ready(function($) {
  var timer;
  $("#foo").on("click", function() {
    if (timer) return
    function bar() {
      if ($(this).hasClass('bar')) {
        timer = null;
        console.log("It was added")
      } else {
        timer = setTimeout(bar.bind(this), 1000);
      }
    }
    bar.apply(this)
  });
})

window.setTimeout(function () {
  $("#foo").addClass("bar")
}, 1000 * (Math.random() * 20))

.bar {
  background-color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="foo">click</button>

为了避免绑定，您可以将this移到方法之外，这样就不必始终查找元素。

jQuery(document).ready(function($) {
  var timer;
  $("#foo").on("click", function() {
    if (timer) return
    var btn = $(this)
    function bar() {
      if (btn.hasClass('bar')) {
        timer = null;
        console.log("It was added")
      } else {
        timer = setTimeout(bar, 1000);
      }
    }
    bar()
  });
})

window.setTimeout(function () {
  $("#foo").addClass("bar")
}, 1000 * (Math.random() * 20))

.bar {
  background-color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="foo">click</button>