Cancel An Animation With A Click (ClearInteval)

Question

I want to stop my setIntervalby clicking on h1 element which contain stop in its content, but It seems I can't make it happen. I can see value of variable of setInterval which is return in callOff variable on console inside and outside click function, but my h1 element which has heading id keeps moving.
Even I decaler callOff globally, yet nothing has change.

Could anyone tell me what I am doing wrong?

var callOff;
var move = function() {
  $("html").mousemove(function(event) {
    $("#heading").offset({
      left: event.pageX,
      top: event.pageY
    });
  });
};

var callOff = setInterval(move, 1000);
console.log(callOff);

$("#stop").click(function() {
  console.log("I am in click " + callOff);
  clearInterval(callOff);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<h1 id="heading">Hello world!</h1>
<h1 id="stop">Stop !</h1>

Note:

May be my approach is not one of the best one, but right now I am learning. I am asking a question and I want help for what I am looking for and not what is the best solution. I really do not get why some people vote down a good quality question either.

@DanielA.White would you be kind and post up your answer please? — Kick Buttowski, Sep 09 '15 at 20:27
@KickButtowski - perhaps you can show what "Challenge #2" is, since that is the basis of this question? Please also include it as text, since images are not searchable. — allicarn, Sep 09 '15 at 20:35

Quentin · Answer 1 · 2015-09-09T20:10:35.230

4

Your interval is repeatedly (and uselessly) binding an event handler for mousemove events.

When you clear the interval, you simply stop binding the event handler. You don't remove the ones you have already bound.

Use setInterval when you want to do something repeatedly on a timer, not when you want to do something every time the mouse moves.

Use the off method to remove event handlers instead.

function move_handler(event) {
  $("#heading").offset({
    left: event.pageX,
    top: event.pageY
  });
}

$("html").on("mousemove", move_handler);
$("#stop").on("click", function(event) {
  $("html").off("mousemove", move_handler);
});

edited Sep 09 '15 at 20:10

answered Sep 09 '15 at 20:08

Quentin

914,110
126
1,211
1,335

would you please give me a sample please? – Kick Buttowski Sep 09 '15 at 20:10
your answer sounds right but the question said I should use clearInteval could you tell me how to use it too? – Kick Buttowski Sep 09 '15 at 20:12
It doesn't make any sense at all to use intervals for the problem as you have described it. I don't see any way in which they could be useful here. – Quentin Sep 09 '15 at 20:13
I posted the question could you take a look at it? – Kick Buttowski Sep 09 '15 at 20:16
@KickButtowski — That doesn't help. Presumably there is an assumption that you are doing your animation using an interval instead of using an event handler that tracks the position of the mouse. It's basically talking about a completely different set of code. – Quentin Sep 09 '15 at 20:19

allicarn · Answer 2 · 2015-09-09T20:33:22.547

Even though you were clearing out your interval, html was still listening (and responding to) mousemove. Because it is simply being set to your mouse points, it is not "animating" and therefore the interval you have is overkill. See Quentin's answer if you just want to move it to your mouse coordinates.

If you are actually animating it, you don't need the listener on mousemove at all. See below for an example of animating it to bounce around within the viewport.

var animation = setInterval(moveHeading, 20), // Will fire moveHeading every 20 milliseconds
    direction = {
      top: 1,
      left: 1
    },
    MOVE_BY = 10; // Will move the header by 10 pixels

$("#stop").on("click.demonamspace", stopMovingHeader);

function moveHeading() {
  var $heading = $("#heading"),
      currOffset = $heading.offset(),
      viewport = {
        "height": $(window).height(),
        "width": $(window).width()
      };
  
  // Keep it on screen (within the viewport)
  if(direction.left > 0 && currOffset.left + MOVE_BY > viewport.width) {
    direction.left = -1;
  } else if(direction.left < 0 && currOffset.left - MOVE_BY < 0) {
    direction.left = 1;
  }
  if(direction.top > 0 && currOffset.top + MOVE_BY > viewport.height) {
    direction.top = -1;
  } else if(direction.top < 0 && currOffset.top - MOVE_BY < 0) {
    direction.top = 1;  
  }
  
  $heading.offset({
    left: currOffset.left + (MOVE_BY * direction.left),
    top: currOffset.top + (MOVE_BY * direction.top)
  });
}

function stopMovingHeader() {
  clearInterval(animation);
}

#heading {
  background: red;
  position: absolute;
}
#stop {
  background: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<h1 id="heading">Hello world!</h1>
<h1 id="stop">Stop !</h1>

I think there is some confusion over whether you are tracking mousemove or animating something. Please see my updated answer for an example of animating something (no mousemove involvement). — allicarn, Sep 09 '15 at 20:34
all conversations should be kept here, on the question, so that others can learn from it as well. Please see my comment on your question, perhaps that will clarify things. — allicarn, Sep 09 '15 at 21:01
first we can not comment a lot here, and it is good to chat. I should not have posted the pic so I deleted it — Kick Buttowski, Sep 09 '15 at 21:07

Cancel An Animation With A Click (ClearInteval)

2 Answers2