如何在调用另一个函数后 10 秒调用一个函数？

Question

我有两个函数，functionOne() 和 functionTwo()。

如何在 functionOne() ends/is 调用后 10 秒调用 functionTwo()？

我希望在单击按钮后出现 functionOne，然后在 functionOne 结束后 10 秒出现 functionTwo（无需单击按钮 again/have 用户可以执行任何操作！）！

我的代码见下文！

<p id="paragraphChange">"Hello World"</p>
<button type="button" id="clickToChangeText" onClick="functionOne()">Click!</button>    

<script>
    
    functionOne() {
        document.getElementById("paragraphChange").innerHTML = "Bye World";
    }

    functionTwo() {
        document.getElementById("paragraphChange").innerHTML = "Jokes I'm still here";
    }
    
</script>

我尝试使用 setTimeout，但问题是我认为没有可用于第一个函数的 'onend' 事件。例如：

setTimeout(functionOne.onend, 10,000);

Answer 1

此代码调用 functionOne onClick 并在 10 秒后调用 functionTwo。

<p id="paragraphChange">"Hello World"</p>
<button type="button" id="clickToChangeText" onClick="functionOne()">Click!</button>        
   
<script>
    
    function functionOne() {
        document.getElementById("paragraphChange").innerHTML = "Bye World";
        setTimeout(() => functionTwo(), 10000);
    }
    
    function functionTwo() {
        document.getElementById("paragraphChange").innerHTML = "Jokes I'm still here";
    }   
</script>

Answer 2

我不认为 JavaScript 中有任何叫做 onend 的东西你必须在 functionOne() 的末尾使用 setTimeout(functionTwo, 10000) 像这样：

function functionTwo() {
    //code to be execute
}

function functionOne(){
    //code to be execute
    
    //End of function
    setTimeout(functionTwo, 10000);
}

Answer 3

最重要的是，您必须使用 function 关键字 正确声明 您的函数：function functionOne、function functionTwo。
这里是the documentation for setTimeout：“全局setTimeout()方法设置一个定时器，它执行一个函数...一次定时器到期。 所以你传入你想要在定时器完成后执行的函数。

这里还有一些解决问题的方法。

缓存您的段落元素以及前面的按钮，这样您就可以使代码尽可能干。
将内联JS移动到脚本中，并使用addEventListner到para元素
使用 textContent 而不是 innerHTML 因为您没有添加 HTML

// Cache the elements
const para = document.querySelector('#paragraphChange');
const button = document.querySelector('#clickToChangeText');

// Add a listener to the button
button.addEventListener('click', functionOne, false);

// Set the text content of the para element
// and then call the second function with a time out
function functionOne() {
  para.textContent = 'Bye World';
  setTimeout(functionTwo, 5000);
}

// Update the para with new text
function functionTwo() {
  para.textContent = 'Jokes I\'m still here';
}

<p id="paragraphChange">"Hello World"</p>
<button type="button" id="clickToChangeText">Click!</button>

Answer 4

先定义functionTow()。

function functionTwo() {
    //code to be execute
}

使用setTimeout调用functionOne体内的functionTwo

function functionOne(){
    //code to be execute
    
    //End of function
    setTimeout(functionTwo, 10000);
}

如何在调用另一个函数后 10 秒调用一个函数？

How to call a function 10 seconds after calling another function?

javascript

function

innerhtml

settimeout