Обязательный клик для вызываемой функции

Question

У меня был предыдущий вопрос по этому поводу, но возникла другая проблема.Я хочу повернуть элемент по часовой стрелке на 22 ', а затем вернуться в начальное состояние 0' при нажатии.Первая функция работает нормально, но вторая функция, которая вызывается через 3 секунды, не сработает, если не щелкнуть повторно.

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)'; 
    }
    setInterval(res, 3000);
    function res() {
        document.getElementById('box').onclick = function() {
            var div = document.getElementById('box'),
            deg = rotated ? 0 : 0;

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

Answer 1

Просто удалите обработчик из res():

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)';
  }
  setInterval(res, 3000);

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

      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)';
    //}
  }
}
clicked();

#box {
  background-color: red;
  width: 50px;
  height: 50px;
}

<div id="box"></div>

В зависимости от ваших потребностей вы также можете сделать что-то упрощенное, например:

document.getElementById('box').onclick = function() {
  clicked(this, 22); // this is the element clicked
  setInterval(clicked, 3000, this, 0);
}

function clicked(div, deg) {
    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)';
}

#box {
  background-color: red;
  width: 50px;
  height: 50px;
}

<div id="box"></div>