This question has already been answered:

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

Reported as a duplicate at Grundy. javascript Apr 1 '18 at 11:52 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • 2
    setTimeout(function() { clickC(rotate); },5000); - MedvedevDev
  • one
    why not answer? - qwabra
  • one
    setTimeout(clickC, 5000, rotate); ie10 + - Artem Gorlachev

1 answer 1

Your code does not work because the first argument to setTimeout is the result of the call to the clickC(rotate) function.

The correct entry of this expression will be

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

or

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


A bit of theory

The setTimeout and setInterval methods have two forms of invocation, which differ in the type and number of arguments:

  1. The first argument is a string containing the code. The second is the delay value in milliseconds.

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

This form of a call looks simpler, but it is not recommended , for the same reasons as using eval : it is slower, and it may be unsafe.

  1. The first argument is a callback function.
    The second is the delay value in milliseconds.
    The third and subsequent parameters are the arguments that will be passed to the callback function.

 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>