如何在 Javascript 中的 function 内添加延迟

Question

我正在尝试创建一个简单的 function，当单击元素时会发生一系列样式更改。

我想在我所做的两次样式更改之间添加 4 秒的延迟。 我发现了一些在 function 之前和之后添加延迟的方法，但在 function 内部却没有，我该如何实现呢？

我的代码：

const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")

document.getElementById("chp1sub").style.backgroundColor = "red";

btnEl.addEventListener("click", function(){
    subtl.style.backgroundColor = "blue"
    
// 4 second delay here before running next line

    subtl.style.transform = "translateY(-90px)"
})

非常感谢对此的任何建议

Answer 1

您可以简单地使用setTimeout方法，它会在您设置的毫秒数后运行 function。 要实现您的需要，您必须为其设置一个匿名 function。

更多信息

例子

setTimeout(() => {
  /* Code to run after 4 seconds */
}, 4000)

用你的代码

const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")

document.getElementById("chp1sub").style.backgroundColor = "red";

btnEl.addEventListener("click", function(){
  subtl.style.backgroundColor = "blue"
    
  setTimeout(() => {
    // 4 second delay here before running next line
    subtl.style.transform = "translateY(-90px)"
  }, 4000)
})

Answer 2

您可以在 function 中简单地使用 CSS transition-delay

Answer 3

创建一个由setTimeout调用的匿名内部 function

const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")

document.getElementById("chp1sub").style.backgroundColor = "red";

btnEl.addEventListener("click", function(){
    subtl.style.backgroundColor = "blue"
    
    setTimeout(function(){
        subtl.style.transform = "translateY(-90px)"
    },4000)
})

或者，因为这是一个 CSS 转换，您可以将CSS 转换延迟用于此转换。