addClass not working within setTimeout function

Question

demo

$('button').on('click',function(){
   setTimeout(function(){
      $(this).addClass('active');
   },500);
});

The active class should be added after 500 ms but it's not adding that is not changing it's background color.

Answer 1

this doesn't refer to the clicked button inside the setTimeout() handler, you can use a simple closure variable to hold a reference to the clicked element and use it in the timeout handler

$('button').on('click', function () {
    var $el = $(this);
    setTimeout(function () {
        $el.addClass('active');
    }, 500);
});