在mouseenter上启动setInterval //在mousleave上重置// 1秒后停止setInterval

我对javascript很陌生，并且遇到了以下问题。我试图将鼠标悬停在元素上时将变量从1000减少到0。如果鼠标离开元素，变量也应重置为1000。在mouseenter上启动setInterval //在mousleave上重置// 1秒后停止setInterval

经过一番研究，我得到了大部分工作，但我无法弄清楚如何让setIntervall在变量达到0之后停止计数。这是我在使用stackoverflow后环顾四周。

var f = 1000, intervalId; 
if (f > 0) 
{ 
    $(".thumb").hover(function() 
    { 
     $this = $(this); 
     intervalId = setInterval(function() 
     { 
      $this.text(f--); 
     }, 1); 
    }, function() 
    { 
     clearInterval(intervalId); 
     f = 1000; 
    }); 
} 
else 
{ 
    clearInterval(intervalId); 
}

我敢肯定这是一个愚蠢的错误，我在这里做，因为我是新来编程，但如果有人可以点我到正确的方向，我真的很感谢你的帮助。

FIDDLE around with the code

来源

2013-04-27 Christian Zschunke

什么是计数器？ – 2013-04-27 14:49:33

我想用spritely来为jQuery在某些按钮上播放png动画。虽然我的工作很好，但在我的情况下有一些可用性问题。主要是动画的倒退，并且真正快速悬停在动画按钮上。我希望通过调用其他函数中的setTimout延迟来帮助我解决这些问题。 – 2013-04-27 15:00:11

演示：http://jsfiddle.net/DVPcA/

var f = 1000; 
var interval; 

$(".thumb").hover(function() { 
    $this = $(this); 

    interval = setInterval(function() { 
    if (f > 0) { 
     $this.text(f--); 
    } else { 
     clearInterval(interval); 
    } 
    }, 1); 
}, function() { 
    clearInterval(interval); 
    f = 1000; 
});

来源

2013-04-27 14:49:23

非常感谢，作品像魅力！ – 2013-04-27 15:31:19

-1

更新了小提琴

http://jsfiddle.net/n74VW/56/

替换该行

$this.text(f--);

与

$this.text(f>0?f--:f=0);

来源

2013-04-27 14:51:52 ripu1581

'f> 0？f - ：f = 0'不是很好。为什么不清除间隔？ – 2013-04-27 14:56:05

像SperanskyDanil说，如果我例如检查chrome的cpu使用情况，即使达到0，它仍然会达到25％。这是对CPU使用的浪费。 – 2013-04-27 15:00:20

我同意，这是更新的小提琴http://jsfiddle.net/n74VW/64/代码将是$ this.text（f> 0？f - :(f = 0，clearInterval（intervalId）））; – ripu1581 2013-04-27 15:07:04

在mouseenter上启动setInterval //在mousleave上重置// 1秒后停止setInterval

回答

相关问题