Question

我正在开发一种效果，当用户将鼠标悬停在符号上时，符号会发生变化。

我已经实现了其中的一部分-元素在悬停时发生了应有的变化。我无法实现的是，在元素不再悬停之后，符号会持续变化几秒钟，然后才停止而不是立即停止。

Javascript：

var
   target = $(".symbol").find('span'),
   possible = ['?', '/', '<', '>', '}', '{', ')', '(', '[', '[', '!', '2', '3', '1', '4', '5', '6', '7', '&', '$', '#'];

var  pickRandom  = function(element) {
        random = Math.floor(Math.random()*possible.length);
        symbol = possible[random];
        currentTarget.html(symbol);
      }

$(target).on({
mouseenter: function () {
  currentTarget = $(this);
  changeSymbols = setInterval(pickRandom, 100);
},

mouseleave: function () {
  // currentTarget = $(this);
  // setTimeout(function(){
    clearInterval(changeSymbols);
  // }, 1000)
}

}）;

非常感谢您的帮助。预先感谢！

Answer 1

您需要能够存储对setInterval的实例特定引用，而不是使用全局changeSymbols。为此，您可以使用data()

将每个引用存储在元素本身上

类似地，当您有多个实例在运行时，currentTarget将无法正常工作，因此需要使用element的{{1}}参数并调用传入元素的函数

pickRandom

Updated Fiddle demo

在多个目标上设置功能间隔，延迟一段时间后清除间隔

1 个答案: