javascript - mouseenter で setInterval を開始 // mousleave でリセット // 1 秒後に setInterval を停止

Question

私はJavaScriptにかなり慣れていないので、次の問題で壁にぶつかりました。要素の上にカーソルを置いているときに、変数を 1000 から 0 に減らそうとしています。マウスが要素から離れた場合も、変数は 1000 にリセットされます。

いくつかの調査の後、ほとんどが機能しましたが、変数が 0 に達した後に setIntervall のカウントを停止する方法がわかりません。これは、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);
}

私はプログラミングに慣れていないので、ここで犯している愚かな間違いだと確信していますが、誰かが私を正しい方向に向けることができれば、本当に助けていただければ幸いです.

コードをいじる