主页 / 问题 / 807777
Accepted
Angel Pensive
Asked:2020-04-01 13:12:15 +0000 UTC2020-04-01 13:12:15 +0000 UTC

延迟不起作用[重复]

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

1 个回答

  1. Best Answer

    您的代码不起作用，因为setTimeout您将函数调用clickC(rotate)的结果作为第一个参数传递给.

    此表达式的正确表示法是

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

    或者

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

    一点理论

    setTimeoutand方法setInterval有两种调用形式，它们的参数类型和数量不同：

    1. 第一个参数是一个包含代码的字符串。第二个是以毫秒为单位的延迟值。

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

    这种形式的调用看起来更简单，但不推荐使用，原因与使用相同eval：速度较慢，而且可能不安全。

    1. 第一个参数是回调函数。
      第二个是以毫秒为单位的延迟值。
      第三个和后续的参数是作为参数传递给回调函数的参数。

    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>

    • 2

相关问题