如何运行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。

以下是一个详细说明如何做到这一点的答案。

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>