时间戳

首页 > 解决方案 > 使用 jQuery setTimeout 在多个元素上更改类以设置时间量

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

问题描述

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

我几乎让它工作了，除了最后一个字悬停在返回到它的初始状态。其他词保持模糊。有没有人有什么建议？见我的 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很陌生，所以我有点卡住了！

标签： javascriptjquery

解决方案

问题是因为您只使用一个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>

推荐阅读