javascript - javascriptを使用して設定間隔で変数をインクリメントしますか?

Question

まず第一に、これはミニ JavaScript スクリプトです。

 f = 1
 $(".thumb").hover(function() {
       intervalId = setInterval($(this).text(f++), 400));
  });

ユーザーのノイズが上にある間に.thumbテキストを増加させようとしています。ホバーアウトして再度ホバーすると増加しますが、ユーザーが要素の上にホバーしている間は増加したいと思います。

Answer 1

試す：

var f = 1,
    intervalId;

$(".thumb").hover(function () {
    $this = $(this);
    intervalId = setInterval(function () {
        $this.text(f++);
    }, 100);
}, function () {
    clearInterval(intervalId);
});

ここでフィドル

Answer 2

このようにするには、実際の関数を渡す必要がありますsetInterval()。

 f = 1
 $(".thumb").hover(function() {
       var self = $(this);
       intervalId = setInterval(function() {self.text(f++)}, 400));
  });

元のコードで行っているのは、$(this).text(f++)すぐに実行される呼び出しの結果をに渡すことsetInterval()です。それは関数を返さないので、コールバック関数がないsetInterval()ので、間隔で何も実行されません。

---

ホバリングを停止するときに間隔も停止したい場合は、次のようにすることができます。

 var f = 1;
 var intervalId;
 $(".thumb").hover(function() {
     var self = $(this);
     if (intervalId) {
         clearInterval(intervalId);
     }
     intervalId = setInterval(function() {self.text(f++)}, 400));
 }, function() {
     f = 1;
     clearInterval(intervalId);
     intervalId = null;
 });

Answer 3

ここにあなたが望むことをするフィドルがあります：http://jsfiddle.net/2pdnP/

var f = 1;
var intervalId = null;
 $(".thumb").hover(function() {
    var self = this;
    intervalId = setInterval(function() {$(self).text(f++)}, 400);
 }, function () {
    clearInterval(intervalId);
 });

hoverIn スコープの外で intervalId を定義し、ホバーアウトしたときに非アクティブ化する必要があります。

Answer 4

これはうまくいきますが、もっと簡単な方法があるかもしれません:

<script>
 var f = 1
 var intervalId;
 var started = false;

 $(".thumb").hover(function() {
    started = true;
  },
  function () {
    started = false;
  });

  intervalId = setInterval(incrementDiv, 400);

  function incrementDiv() {
    if (started) {
        $(".thumb").text(f++);
    }
  }
</script>

これは、マウスが要素の上に置かれている間、値の増加を開始し、マウス カーソルが離れると停止します。