0
rotate.onclick = function () {
   setTimeout(clickC(rotate),5000);
};

1 Answers1

2

Ваш код не срабатывает по той причине, что первым аргументом в setTimeout Вы передаете результат вызова функции clickC(rotate).

Правильной записью данного выражения будет

rotate.onclick = function () {
  setTimeout(function () {
    clickC(rotate);
  }, 5000);
};

или

rotate.onclick = () => setTimeout(() => { clickC(rotate); }, 5000); 


Немного теории

У методов setTimeout и setInterval есть две формы вызова, которые различаются типом и количеством аргументов:

  1. Первый аргумент - строка, содержащая код. Второй - значение задержки в миллисекундах.

        alert('Через 3 секунды будет показано сообщение'); 
        setTimeout("alert('Привет!');", 3000);

Такая форма вызова выглядит проще, но она не рекомендуется, по тем же причинам что и использование eval: это медленнее, и это может быть небезопасно.


  1. Первый аргумент - callback-функция.
    Второй - значение задержки в миллисекундах.
    Третий и последующие - параметры, которые будут переданы аргументами в callback-функцию.

let rotate = document.getElementById('rotate'); 
rotate.style.transform = 'skewX(-5deg) rotate(0deg)';

rotate.addEventListener('click', () => { // таймаут с вызовом ф-ции clickC, и передачей ей трех аргументов setTimeout(clickC, 1000, rotate, -180, 180); });

clickC(rotate, 0, 0); console.log('Клик по центрованному элементу установит таймаут вызова clickC(rotate, -180, 180)');

function clickC(el, skInc, rtInc) { el.style.transform = el.style.transform.replace( /^skewX((.+)deg)\s+rotate((.+)deg)$/i, (s, m1, m2) => skewX(${+m1 + skInc}deg) rotate(${+m2 + rtInc}deg) ); el.textContent = el.style.transform; }

body {
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  height: calc(100vh - 3em); 
}

#rotate {
  flex: 0 0 auto; 
  text-align: center; 
  font: 24px sans-serif; 
  cursor: pointer; user-select: none; 
  transition: transform 0.8s linear; 
}
<div id="rotate"></div>
yar85
  • 10,940