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

小提琴here

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>

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

使用javascript在设置间隔上增加变量？

4 个答案: