Как запустить setTimeout () до определенного события c?

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

У вас есть некоторые проблемы с синтаксисом, вы не вызываете панель, поэтому она никогда не работает, и проблемы с этим, так как setTimeout меняет область действия на окно.

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>

Чтобы избежать привязки, вы можете переместить это за пределы метода, чтобы не всегда искать элемент.

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>

Answer 2

Для непрерывного запуска некоторых логи c используйте интервал вместо таймера. Чтобы очистить интервал, сохраните ссылку на него и затем вызовите 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, который вызовет вашу логику c, когда класс добавлено, без необходимости постоянно опрашивать DOM.

Здесь - это ответ, подробно описывающий, как это можно сделать.