javascript - use jQuery setTimeout to change classes for set amount of time on multiple elements

Question

I'm trying to have a blurred effect on words when the mouse hovers over them. I would like the words to be blurred for a second or so and then return to standard words in the order that they were hovered on.

I've almost got it working, except only the last word hovered on returns to its initial state. The other words stay blurred. Does anyone have any suggestions? See my jsfiddle: http://jsfiddle.net/rrosegregoryy/tavh892w/

And the code I've tried that's not giving me the desired result:

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

I'm quite new to javascript so I'm a little stuck!

question from:https://stackoverflow.com/questions/65918678/use-jquery-settimeout-to-change-classes-for-set-amount-of-time-on-multiple-eleme

Answer 1

The issue is because you're only using a single setTimeout() reference. As soon as you hover over the next word the previous timeout is cleared.

To fix this you need to use multiple timeouts, one per word. You can place them in to the data() of the element to retain a reference to them:

(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>