异步 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);
在上面的例子中,myDisplayer
是一个函数的名称。
它作为参数传递给myCalculator()
。
在现实世界中,回调函数最常用于异步函数。
一个典型的例子是 JavaScript setTimeout()
。
等待超时
使用 JavaScript 函数 setTimeout()
时,可以指定在超时时执行的回调函数
例子
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "我爱你!";
}
在上面的例子中,myFunction
用作回调函数。
myFunction
作为参数传递给 setTimeout()
。
3000 是超时前的毫秒数,因此 myFunction()
将在 3 秒后被调用。
注意
将函数作为参数传递时,请记住不要使用括号。
正确:setTimeout(myFunction, 3000);
错误:setTimeout(myFunction(), 3000);
除了将函数名作为参数传递给另一个函数,还可以直接传递整个函数
例子
setTimeout(function() { myFunction("我爱你!!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
在上面的例子中,function(){ myFunction("我爱你!!!"); }
用作回调函数。它是一个完整的函数。完整的函数作为参数传递给 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();
}
在上面的例子中,myFunction
用作回调函数。
myFunction
被传递给 setInterval()
作为参数。
1000 是间隔之间的毫秒数,因此 myFunction()
将每秒钟被调用一次。
回调函数的替代方案
通过异步编程,JavaScript 程序可以启动长时间运行的任务,并继续并行运行其他任务。
但是,异步程序难以编写和调试。
因此,大多数现代异步 JavaScript 方法不使用回调函数。相反,在 JavaScript 中,异步编程是使用 **Promises** 解决的。
注意
您将在本教程的下一章中学习有关 promises 的知识。