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

Question

我对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);
}

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

摆弄代码

Answer 1

演示：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;
});

Answer 2

更新了小提琴

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

替换这一行

$this.text(f--);

和

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