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

increment variable on set interval using javascript?

本文关键字：增加 变量 javascript 设置 使用      更新时间：2023-09-26

首先这是一个迷你javascript脚本:

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

我试图让。thumb文本在用户的声音在它上面时增加，当我悬停并再次悬停时增加，但我想在用户悬停在元素顶部时增加。

尝试:

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

小提琴

您必须像这样传递一个实际的函数给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;
 });

这是一个您想要的小提琴: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，然后在悬停时停用它

这是可行的，但可能有一个更简单的方法:

<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>

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

相关文章：