jQuery - タイマが機能しないmouseleave/mouseleave

Question

私がやっていることは、誰かが1秒間要素に乗ったときにのみコードを実行することです。ここで

は、私が使用していたコードです：

var timer; 

$(".homeLinkWrap").mouseenter(function() { 
    timer = setTimeout(function(){ 
    $(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'}); 
    console.log('in'); 
    }, 1000); 
}).mouseleave(function() { 
    $(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY'); 
    console.log('out'); 
    clearTimeout(timer); 
}); 

最初の部分（のMouseEnter）が機能していないと、クラスを削除してから新しいものを追加しません。 2番目のもの（mouseleave）が正しく機能していて、クラスを削除して新しいクラスを追加しません。

これは、現在の要素がホバリングされている$ thisを対象としているためです。また、jQueryは$（this）が参照していることを知らないため、タイマー関数になっています。

これを解決するにはどうすればよいですか？

Answer 1

あなたはsetTimeout関数の中で$（this）を呼び出していると思います。 thisは、もはやjQueryの選択を意味し、setTimeoutコールバック内部

$(".homeLinkWrap").mouseenter(function() { 
    var $self = $(this); 
    timer = setTimeout(function(){ 
     $self.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'}); 
     console.log('in'); 
    }, 1000); 
}); 

Answer 2

：あなたはこのような何かをする必要はありません。あなたは選択への参照を保持する必要があり、次のいずれか

$(".homeLinkWrap").mouseenter(function() { 
    var $this = $(this); 
    timer = setTimeout(function(){ 
    $this.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'}); 
    console.log('in'); 
    }, 1000); 
}) 

または矢印機能（ES2015）を使用

$(".homeLinkWrap").mouseenter(function() { 
    timer = setTimeout(() => { 
    $(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'}); 
    console.log('in'); 
    }, 1000); 
}) 

Answer 3

ここでの問題は、あなたがsetTimeoutに渡しているコールバック関数内でそのthisですコールバック以外のthisと同じポイントを参照しません。

あなたの問題を解決するためのいくつかの方法がありますが、私はあなたが外に持っている同じthisにコールバック関数をバインドするFunction.prototype.bindを使用することができ勧めます：

var timer; 

$(".homeLinkWrap").mouseenter(function() { 
    timer = setTimeout((function() { 
    $(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({ opacity: '1' }); 
    }).bind(this), 1000); 
}).mouseleave(function() { 
    $(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY'); 
    clearTimeout(timer); 
});