CODEWITHSUNDEEP
javascriptjquery
Tester
Tester

Reputation: 157

Jquery - hasclass after delay

I want to check if an element has a class after some time. Like delay. Basically the class is being added to the element by some other function. So If I check the hasClass on that clicked element it returns false. 

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

This is what I am trying but I want to know if we can add delay to hasClass, or any other way to achieve this. But it is not working

As per answers suggested I tried this - 

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

But no outcome now in console.

Just to update -

The class is being applied on click, and the same click I basically wants to know if the class is applied, so I am using hasclass. Is there any other way out, or am I doing it wrong

EDIT - 

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

I am trying this but still getting false

UPDATE - 

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

This worked!!

Upvotes: 1

Views: 1078

Answers (3)

Pardeep Dhingra
Pardeep Dhingra

Reputation: 3946

Try setTimeout for simulating the delay. And if you want to test this repeatedly until you get it selected you can try setInterval(function(){}, interval). You need to call clearInterval if you want to stop calling the function.

$("#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>

Upvotes: 3

Suresh
Suresh

Reputation: 923

You can use timer function 

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

Upvotes: 0

Deepak Sharma
Deepak Sharma

Reputation: 4170

you can use setTimeout its javascript function that does callback execution after the miliseconds passed in as second parameter

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

Upvotes: 1

Related Questions