异步JavaScript

最新推荐文章于 2025-12-11 16:09:33 发布

原创最新推荐文章于 2025-12-11 16:09:33 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

文章介绍了JavaScript中的异步概念，通过setTimeout和setInterval函数展示了如何使用回调函数实现延迟或周期性执行。同时提到了异步编程的挑战以及现代JavaScript倾向于使用Promise来处理异步操作。

与其他函数并行运行的函数称为异步

一个很好的例子是 JavaScript setTimeout()

function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>

<p>The result of the calculation is:</p>
<p id="demo"></p>

<script>
function myDisplayer(something) {
  document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);
</script>

</body>
</html>

在上面的示例中， myDisplayer 是一个函数的名称。

它作为参数传递给 myCalculator() 。

等待超时

使用 JavaScript 函数 `setTimeout()` 时，可以指定超时时执行的回调函数：

setTimeout(myFunction, 3000);

function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}
</script>

</body>
</html>

在上面的示例中， myFunction 用作回调。

myFunction 作为参数传递给 setTimeout() 。

3000 是超时前的毫秒数，所以 myFunction() 将在 3 秒后调用。

将函数作为参数传递时，切记不要使用括号。

始终可以传递整个函数，而不是将函数名称作为参数传递给另一个函数：

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

在上面的示例中， function(){ myFunction("I love You !!!"); } 用作回调。它是一个完整的功能。完整的函数作为参数传递给 setTimeout()。

3000 是超时前的毫秒数，所以 myFunction() 将在 3 秒后调用。

等待间隔：

使用 JavaScript 函数 `setInterval()` 时，可以指定每个时间间隔执行的回调函数：

setInterval(myFunction, 1000);

function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Using setInterval() to display the time every second (1000 milliseconds).</p>

<h1 id="demo"></h1>

<script>
setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}
</script>

</body>
</html>