Jquery - 延迟后的 hasclass

Question

我想在一段时间后检查一个元素是否有类。比如拖延。基本上，该类是由其他函数添加到元素中的。因此，如果我检查单击的元素上的hasClass，它将返回 false。

var check_selected = $(this).hasClass('selected');
if ( $(this).hasClass('selected').delay(500) ) {
console.log(check_selected);
}

这就是我正在尝试的，但我想知道我们是否可以增加延迟hasClass，或任何其他方法来实现这一目标。但它不起作用

根据建议的答案，我尝试了这个 -

var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);

但现在控制台没有结果。

只是为了更新 -

该类在单击时被应用，并且同一单击我基本上想知道该类是否被应用，所以我正在使用hasclass。有没有其他出路，还是我做错了

编辑-

var _this = this;
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(_this).hasClass('selected') ) {
console.log(check_selected);
}
}, 5000);

我正在尝试这个但仍然出错

更新-

var checkSelected =  setInterval(function(){ 
var check_selected = $(_this).hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);

这奏效了！！

Answer 1

尝试setTimeout来模拟延迟。如果您想反复测试直到选择它，您可以尝试setInterval(function(){}, interval).如果要停止调用函数，则需要调用clearInterval。

$("#test").on("click", function(){
const component = $(this);

setTimeout(function(){ 
component.addClass("selected");
}, 600);
setTimeout(function(){ 
var check_selected = component.hasClass('selected');
console.log(check_selected);
}, 500);
var checkSelected =  setInterval(function(){ 
var check_selected = component.hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Check my class</div>

Answer 2

您可以使用其 JavaScript 函数setTimeout该函数在作为第二个参数传入的miliseconds传入后执行回调执行

var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);

Answer 3

您可以使用定时器函数

var currObj = this;
setTimeout(function(){ 
var check_selected = $(currObj ).hasClass('selected');
if ($(currObj).hasClass('selected')) {
console.log(check_selected);
} 
},500);