2020/11/26

setTimeout内で this を取得できるようにする







setTimeout を使った時に thisが効かなかったので、効くようにする書き方メモ。
なぜそうなるか理解できてません。。



See the Pen setTimeout内で this を取得できるようにする by takapen (@takapen) on CodePen.







html

btn01(だめ)

btn02(いける)

btn03(いける)






jQuery
$(function(){

  //だめ
  var btn01 = $('#js-btn01');
  btn01.on('click',function(){
    $(this).fadeOut();
    setTimeout(function(){
      $(this).fadeIn();
    },2000);
  });

  //いける
  var btn02 = $('#js-btn02');
  btn02.on('click',function(){
    var $this = $(this);
    $this.fadeOut();
    setTimeout(function(){
      $this.fadeIn();
    },2000);
  });

  //いける
  var btn03 = $('#js-btn03');
  btn03.on('click',function(){
    var $this = $(this);
    $this.fadeOut();
    setTimeout($.proxy(function(){
      $this.fadeIn();
    }, this), 2000);
  });

    
});