前后旋转元素

Question

我试图在1秒后来回旋转元素，代码返回错误“RangeError：超出最大调用堆栈大小”而不是向后旋转。我能做些什么才能实现上述目标？此错误信息实际上意味着什么？

var rotated = false;

function clicked() {
    document.getElementById('box').onclick = function() {
    var div = document.getElementById('box'),
        deg = rotated ? 0 : 22;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 
  }
 setTimeout(reset, 1000);
function reset() {
     reset();
    }
  }
function reset() {
    document.getElementById('box').onclick = function() {
     var div = document.getElementById('box'),
        deg = rotated ? 0 : -22;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 
  }
}


         body{
    background-color:#ccc;
    }    
     #cont{
        width:90%;
        height:104%;
        background-color:white;
        position:absolute;
        left:65px;
        top:-30px;
    }
    #box{
      background-color:black;
      width:15%;
      height:24.6%;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      position:absolute;
      top:35.7%;
       left:41.7%;
   }