Wie führe ich eine Funktion fortwährend aus, während die Maus nicht bewegt wird, bis die Maus hochgefahren ist?

Question

Ich habe die folgende Funktion, die ein Bild

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

jedoch dreht sich, wenn ich es folgendermaßen nennen es führt nur ein einziges Mal auf einem mousedown-.

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

Meine Absicht ist es für das Bild zu drehen, während es wird gepackt ist und bis der Benutzer geht der Klick der Maus läßt. Gibt es einen einfachen Weg, dies ohne die Verwendung externer Bibliotheken zu tun?

Answer 1

Beispiel:

Ein Beispiel dafür finden Sie hier

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

Sie müssen wiederholt einen Code mit setInterval aufrufen, wenn Sie die Maustaste gedrückt halten, und den Mauszeiger beim Mouse-Up abbrechen. http://www.codingforums.com/showthread.php?t=166115

Einige Informationen über 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 obigen Code habe ich eine variabl isMouseDown . Wenn die Maus nicht bewegt wird, setzen Sie sie auf true. Während es wahr ist sollte dein Bild rotieren. Ich bin auch verbindlich auf mouseup. Wenn es aufgerufen wird, wird isMouseDown auf false festgelegt. Daher stoppt die Rotation.

Ich benutze die gleiche Technik für meine Zeichnungs-App, wenn ich auf der Leinwand zeichnen muss, wenn die Maus unten ist, und wenn sie wieder aufhört. Hoffe es hilft :)