JavaScript 异步


目录

    显示目录

“我稍后会完成!”

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

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

异步 JavaScript

上一章中使用的示例非常简单。

这些示例的目的是演示回调函数的语法:

例子

 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()


等待超时

使用 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(myFunction, 3000);

错误:setTimeout(myFunction(), 3000);

不是将一个函数的名称作为参数传递给另一个函数, 您始终可以传递整个函数:

例子

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>

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

myFunction 作为参数传递给 setInterval()

1000 是间隔之间的毫秒数,所以 myFunction() 每秒都会调用一次。


回调替代方案

通过异步编程,JavaScript 程序可以启动长时间运行的任务, 并继续并行运行其他任务。

但是,异步程序很难编写,也很难调试。

因此,大多数现代异步 JavaScript 方法不使用回调。 相反,在 JavaScript 中,异步编程是使用 Promises 来解决的。

笔记

您将在本教程的下一章中了解 Promise。