javascript - 使用 jQuery setTimeout 在多个元素上更改类的设定时间量

Question

当鼠标悬停在单词上时，我试图对单词产生模糊效果。我希望单词模糊一秒钟左右，然后按照悬停的顺序恢复为标准单词。

我几乎已经开始工作了，除了最后一个字悬停在返回到它的初始状态。其他词保持模糊。有没有人有什么建议？查看我的 jsfiddle:http://jsfiddle.net/rrosegregoryy/tavh892w/

我试过的代码没有给我想要的结果:

var hoverTimeout;
$('span').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('hovered');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('hovered');
    }, 1000);
});

我是 javascript 的新手，所以有点卡住了!

Answer 1

问题是因为您只使用了一个 setTimeout() 引用。只要您将鼠标悬停在下一个单词上，就会清除之前的超时。

要解决此问题，您需要使用多个超时，每个单词一个。您可以将它们放入元素的 data() 以保留对它们的引用:

(function(count) {
  'use strict';
  (function wrap(el) {
    $(el).filter(':not(script)').contents().each(function() {
      // Node.* won't work in IE < 9, use `1`
      if (this.nodeType === Node.ELEMENT_NODE) {
        wrap(this);
        // and `3` respectively
      } else if (this.nodeType === Node.TEXT_NODE && !this.nodeValue.match(/^\s+$/)) {
        $(this).replaceWith($.map(this.nodeValue.split(/(\S+)/), function(w) {
          return w.match(/^\s*$/) ? document.createTextNode(w) : $('<span>', {
            id: count = count + 1,
            text: w
          }).get();
        }));
      }
    });
  }('body'));
}(0));

$('span').hover(function() {
  let $self = $(this).addClass('hovered');
  clearTimeout($self.data('timeout'));
}, function() {
  var $self = $(this);
  $self.data('timeout', setTimeout(function() {
    $self.removeClass('hovered');
  }, 1000));
});

p {
  font-size: 26px;
}

.hovered {
  filter: blur(3px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <p>hello my name is rose how are you </p>
</div>