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）IS无法运行，并且不会删除该类，然后添加新类。第二个（mouseleave）IS正常运行，并删除该类并添加新类。

我猜这是因为我的目标是$（this），这是当前正在悬停的元素，因为它在一个计时器函数中，jQuery不知道$（this）指的是哪个元素。

我该怎么做才能解决这个问题？

Answer 1

我认为这是因为你在setTimeout函数中调用了$（this）。你需要做这样的事情：

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

在./Pods/FirebaseCrash/batch-upload -p <Path for GoogleService-Info.plist> -i <Path of Info.plist> <Service account JSON file> <UUID>回调中，setTimeout不再引用jQuery选择。您应该保留对选择的引用：

this

或使用箭头功能（ES2015）

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

Answer 3

这里的问题是你传递给$(".homeLinkWrap").mouseenter(function() { timer = setTimeout(() => { $(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'}); console.log('in'); }, 1000); })的回调函数中的this没有引用回调之外的setTimeout所做的那一点。 / p>

有一些方法可以解决您的问题，我建议您使用Function.prototype.bind将回调函数绑定到外面的this：

this

jQuery - mouseenter / mouseleave，计时器无法正常工作

3 个答案: