在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

回答

相關問題