Javascript 在鼠标上启动setInterval//在鼠标上重置离开//1秒后停止setInterval

我对javascript相当陌生，遇到了如下问题。我试图将一个变量从1000减少到0，同时将鼠标悬停在一个元素上。如果鼠标离开元素，该变量也应重置为1000

经过一些研究，我使它的大部分工作，但我不知道如何让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);
}

我敢肯定，我在这里犯了一个愚蠢的错误，因为我是编程新手，但如果有人能给我指出正确的方向，我将非常感谢你的帮助

演示：

更新小提琴

更换这条线

$this.text(f--);

与

---

计数器的作用是什么？我想使用Sprity for jquery在一些按钮上播放png动画。虽然我让它工作得很好，但在我的例子中它有一些可用性问题。主要是动画的反转和在动画按钮上的快速悬停。我希望一个变量可以通过调用其他函数时的settimeout延迟来帮助我解决这些问题。为什么不清除间隔？就像SperanskyDanil说的，如果检查chrome的cpu使用率，即使达到0，它仍将保持在25%。这是对cpu使用的浪费。我同意，这是更新后的fiddle代码将是$this.text（f>0？f-：（f=0，clearInterval（intervalId））；这就是为什么用这种方式编写代码不那么好的原因：

$this.text（f>0？f--（f=0，clearIntervalid））f时，code>将文本设置为
1
$this.text(f--);

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