“我稍后会完成!”
与其他函数并行运行的函数称为异步
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()
。
使用 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。