Javascript 在函数内暂停

Question

在下面的示例中，我想在更改元素一的样式后暂停脚本。然后在 500 毫秒后，继续更改元素二的样式。由于 setTimeout() 需要一个函数参数，我如何在不延迟整个函数的情况下实现这一点？

注意：该函数由 onclick="myFunction()" 在 HTML 元素上调用。

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // Wait 500 miliseconds

    // Execute for element 2
    elementTwo.style.cssText = "some styles";
}

Answer 1

我猜你会把你想要延迟的代码放在一个匿名函数中，就像这样：

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // Wait 500 miliseconds

    // Execute for element 2
    setTimteout(() => {
        elementTwo.style.cssText = "some styles";
    }, 500);
}

Answer 2

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

   // Execute for element 1
   elementOne.style.cssText = "some styles";

   // Wait 500 miliseconds

   // Execute for element 2
   setTimteout(() => {
     elementTwo.style.cssText = "some styles";
   }, 500);  
}

Answer 3

As setTimeout() requires a function parameter, how do I achieve this without delaying the entire function?

您可以使用 setTimeout() 并传递一个函数来更改元素 2 的样式。

它不会耽误你的整个功能。（在您的示例中 myFunction）。相反，它只是延迟了您作为参数传入的匿名函数的执行。

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // Wait 500 miliseconds
    setTimeout(function(){ 
     // Execute for element 2
     elementTwo.style.cssText = "some styles"; 
     }, 500);
}

Javascript 在函数内暂停

Javascript pause within function

javascript

delay

settimeout