CODEWITHSUNDEEP
javascriptjquerysetintervalmouseup
JCHASE11
JCHASE11

Reputation: 3941

setInterval cannot clear with mouseup

I am using mousedown and mouseup to trigger a setInterval function like so:

$("#rotateRight").mousedown(function() {
    intervalIRight = setInterval(rotateRight, 0);
}).mouseup(function() {
    clearInterval(intervalIRight);
});

This works great, however, if I release the mouse (mouseup) when I am not hovering over $("#rotateRight") then there is technically no 'mouseup' so the interval goes on forever and is never cleared.

I cannot use hover because I want the even to be when a user clicks and holds a mouse. But at the same time, I need to fix this 'mouseup bug.' Any ideas?

UPDATE: New code is as follows, but still does not clear interval because mouseup happens on an iframe, not the DOM.

var intervalIRight;
var intervalILeft;


$("#rotateRight").on('mousedown', function() {
    intervalIRight = setInterval(rotateRight, 0);
});

$("#rotateLeft").on('mousedown', function() {
     intervalILeft = setInterval(rotateLeft, 0);
});

$(document).on('mouseup', function() {
    clearInterval(intervalIRight);
    clearInterval(intervalILeft);
});

Upvotes: 0

Views: 1186

Answers (1)

adeneo
adeneo

Reputation: 318362

clear the interval on any mouseup by attaching the event handler to the document.

var intervalIRight;

$("#rotateRight").on('mousedown', function() {
    intervalIRight = setInterval(rotateRight, 0);
});

$(document).on('mouseup', function() {
    clearInterval(intervalIRight);
});

FIDDLE

Upvotes: 1

Related Questions