I'm doing a virtual roulette, for which roulette already moves when I click on the image but there is no expiration time for which I put this code inside the javascript but it does not stop and it rotates and turns
this.style.transitionDuration = "1s";
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../js/bootstrap.js"></script>
<style>
#cont{ position:absolute; left:50%; top:50%; margin-top:-175px; margin-left:-250px; cursor:pointer; width:500px; height:350px;}
#cont img{ position:relative}
</style>
<script>
function rotate(angle) {
var rotation = Math.PI * angle / 180;
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (!window.ActiveXObject) {
this.style.position = 'absolute';
this.style.webkitTransform = 'rotate(' + angle + 'deg)';
this.style.khtmlTransform = 'rotate(' + angle + 'deg)';
this.style.MozTransform = 'rotate(' + angle + 'deg)';
this.style.OTransform = 'rotate(' + angle + 'deg)';
this.style.transform = 'rotate(' + angle + 'deg)';
} else {
this.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
this.filters.item(0).M11 = costheta;
this.filters.item(0).M12 = -sintheta;
this.filters.item(0).M21 = sintheta;
this.filters.item(0).M22 = costheta;
this.style.top = ((this.parentNode.offsetHeight / 2) - (this.offsetHeight / 2)) + 'px';
this.style.left = ((this.parentNode.offsetWidth / 2) - (this.offsetWidth / 2)) + 'px';
}
}
var ns = {}
onload = function () {
(function () {
document.getElementById('im').onmousedown = function () {
var _this = this;
ns.angulo = ns.angulo || 0;
ns.timmer = setInterval(function () { rotate.call(_this, ns.angulo += 5) }, 30);
}
document.getElementById('im').onmouseup = function () {
clearInterval(ns.timmer);
}
})();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div id="cont">
<img id="im" src="../img/descarga%20(1).jpg" width="350px" />
</div>
</div>
</form>
</body>
</html>