时间戳

首页 > 解决方案 > JavaScript 中的 setTimeout(() => btn.click()) 和 btn.click() 有什么区别？

javascript - JavaScript 中的 setTimeout(() => btn.click()) 和 btn.click() 有什么区别？

问题描述

下面找到我的代码，

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

<button id="btn">click</button>
<div id="box"></div>
<script>
    const box = document.getElementById('box');
    const btn = document.getElementById('btn');

    document.getElementById('btn').addEventListener('click', function() {
      box.style.transform = 'translateX(1000px)';
      box.style.transition = 'transform 1s ease-in-out';

      getComputedStyle(box).transform;
      box.style.transform = 'translateX(500px)';
      
    });

    // method 1
    document.getElementById('btn').click();
    
    // method 2
    setTimeout(() => {
      btn.click();
    }, 1000)
    
</script>

谷歌浏览器：版本 92.0.4515.107（正式版）(x86_64)

火狐：版本：90.0.2

这是我在 StackOverflow 上的第一个问题。在上面的代码中，方法一和方法二会导致不同的动画，这是为什么呢？

更新： 我不是在谈论 1 秒延迟

在线示例：

https://codesandbox.io/s/compassionate-tharp-ommki?file=/index.html

然后更改代码并查看这些 gif：

方法1

方法2

标签： javascriptanimationclicktransformsettimeout

解决方案

btn.click() 函数会立即评估，而如果您使用 setTimeOut() 函数，则评估会在指定的毫秒数后完成。

setTimeout(function(){ alert("Hello"); }, 3000);

请注意，1000 毫秒 = 1 秒。

推荐阅读