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>

这将在鼠标悬停在元素上时开始增加值，并在鼠标光标移开时停止。