如何在鼠标按下时永久执行功能，直到鼠标按下为止？

Question

I have the following function which rotates an image

function rotateImage(offsetSelector, xCoordinate, yCoordinate, imageSelector){

var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
var theta = Math.atan2(y,x)*(180/Math.PI);        

var rotate = 'rotate(' + theta + 'deg)';
imageSelector.css('-moz-transform', rotate);
}

However when I call it the following way it only executes once upon a mousedown.

$('#someImage').on('mousedown', function(event){
        rotateImage($(this).parent(), event.pageX,event.pageY, $(this));    
});

My intent is for the image to rotate while it's being grabbed and until the user lets go of the mouse click. Is there a simple way to do this without the use of external libraries?

Answer 1

Example:

var timer;
function rotateImageTimer(offsetSelector, xCoordinate, yCoordinate, imageSelector)
{
    timer = setInterval("rotateImage('"+offsetSelector+"', '"+xCoordinate+"', '"+yCoordinate+"', '"+imageSelector+"')", 100);
}


function rotateImage(offsetSelector, xCoordinate, yCoordinate, imageSelector){
    var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
    var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
    var theta = Math.atan2(y,x)*(180/Math.PI);        

    var rotate = 'rotate(' + theta + 'deg)';
    imageSelector.css('-moz-transform', rotate);      
}


$('#someImage').on('mousedown', function(event){
    rotateImageTimer($(this).parent(), event.pageX,event.pageY, $(this));  
});

$('#someImage').on('mouseup', function(event){
    clearIneterval(timer);   
});

Answer 2

You will need to repeatedly call some code using setInterval when you mousedown, and cancel it when you mouseup.

An example of that can be found here: http://www.codingforums.com/showthread.php?t=166115

Some information on setInterval & setTimeout: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Answer 3

    var isMouseDown = false;

$('#someImage').on('mousedown', function(event){
isMouseDown = true;
        rotateImage($(this).parent(), event.pageX,event.pageY, $(this));    
});
$('#someImage').on('mouseup', function(event){
isMouseDown = false;

});


function rotateImage(offsetSelector, xCoordinate, yCoordinate, imageSelector){
   while(isMouseDown){
 var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
    var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
    var theta = Math.atan2(y,x)*(180/Math.PI);        

    var rotate = 'rotate(' + theta + 'deg)';
    imageSelector.css('-moz-transform', rotate);    
}// end of while  
}

In above code I have a variabl isMouseDown . When mouse is down its set to true . While its true your image should rotate. I am also binding event on mouseup . When its called , isMouseDown gets set to false . Hence stopping the rotation.

I use same technique for my drawing app when I need to draw on canvas when mouse is down and stop when its up again. Hope it helps :)