increment variable on set interval using javascript?

Question

First of all this is the mini javascript script:

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

Im trying to get the .thumb text to increase while the users moise is over it, It increases when i hover out and hover over again, but i want to increase while the user is hovered on top of the element.

Please explain your problem more clearly. I don't understand what you mean by "It increases when i hover out and hover over again, but i want to increase while the user is hovered on top of the element." — Albert Xing
– Albert Xing, Commented Mar 9, 2013 at 5:47
I think he means he wants the number to continually increment when the mouse is over it, but it only increments once for each time he moves the mouse over it. Did I understand that correctly? — Adam Plocher
– Adam Plocher, Commented Mar 9, 2013 at 5:48

darshanags · Accepted Answer · 2013-03-09 05:56:36Z

2

Try:

var f = 1,
    intervalId;

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

Fiddle here

answered Mar 9, 2013 at 5:56

darshanags

2,5271 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jfriend00 · Accepted Answer · 2013-03-09 06:08:07Z

1

You would have to pass an actual function to setInterval() like this:

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

What you are doing in your original code is passing the result of calling $(this).text(f++) which executes immediately to setInterval(). Since that doesn't return a function, there is no callback function for setInterval() so nothing runs on the interval.

If you also want to stop the interval when you stop hovering, then you could do this:

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

edited Mar 9, 2013 at 6:08

answered Mar 9, 2013 at 5:51

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

MattDiamant Over a year ago

This doesn't stop when the user mouses off, and triggers again and starts going faster when there's multiple mouseovers.

jfriend00 Over a year ago

@MattDiamant - yes, the OP needs to extend their code to stop the interval when the hover stops if that is the behavior they want. I wasn't aware the OP was asking for help with that. I've added that option to my answer.

MattDiamant · Accepted Answer · 2013-03-09 05:57:05Z

1

Here is a fiddle that does what you want: 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);
 });

You need to have intervalId defined outside of your hoverIn scope, and then deactivate it when you hover out.

answered Mar 9, 2013 at 5:57

MattDiamant

8,8394 gold badges39 silver badges47 bronze badges

Comments

Adam Plocher · Accepted Answer · 2013-03-09 05:54:49Z

0

This works, but there might be a simpler way:

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

This will start incrementing the value while the mouse is hovered over the element, and stop when the mouse cursor moves away.

answered Mar 9, 2013 at 5:54

Adam Plocher

14.3k6 gold badges51 silver badges83 bronze badges

Collectives™ on Stack Overflow

increment variable on set interval using javascript?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related