How to pass this (jQuery selector) to setTimeout() function?

Question

This works as expected:

$('.lock').click(function() {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function() {
    $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
    $('.fa-unlock').css('color', 'green');
  }, 600);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
  @keyframes halfflip {
    to {
      transform: rotateY(360deg);
    }
  }
  
  .fa-flip {
    animation-name: halfflip;
    animation-timing-function: ease-in-out;
  }
  
</style>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>

But this doesn't:

$('.lock').click(function() {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function() {
    $('.fa-lock', this).css('color', 'rgba(0, 0, 0, 0)');
    $('.fa-unlock', this).css('color', 'green');
  }, 600);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
  @keyframes halfflip {
    to {
      transform: rotateY(360deg);
    }
  }
  
  .fa-flip {
    animation-name: halfflip;
    animation-timing-function: ease-in-out;
  }
  
</style>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>

How to correctly pass this to setTimeout() function without declaring a variable holding the jQuery selector?

Adding "some more details". Adding "some more details". Adding "some more details". Adding "some more details". Adding "some more details".

Use an arrow function inside the timeout? – evolutionxbox Nov 09 '21 at 20:34 — evolutionxbox, Nov 09 '21 at 20:34

Abdullah Khan · Accepted Answer · 2021-11-09T21:05:10.453

Replace your code with this

$('.lock').click(function() {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(()=>{
    $('.fa-lock', this).css('color', 'rgba(0, 0, 0, 0)');
    $('.fa-unlock', this).css('color', 'green');
  }, 600);
});

The reason this works and not the other one is, arrow function uses this of parent scope in its scope while a function defined with function keyword initializes its own this instance within its scope

How to pass this (jQuery selector) to setTimeout() function?

1 Answers1