javascript实践教程-10-回调函数

2022-09-27 12:09:28

本节目标

掌握回调函数的概念。
掌握回调函数的应用：setTimeout函数、setInterval函数。

内容摘要

本篇介绍了回调函数的概念，回调函数应用的两个函数：setTimeout函数、setInterval函数。

阅读时间20~30分钟。

回调函数基础

前面一篇我们讲解了函数声明的几种方式，我们知道了函数可以赋值给一个变量，是一个数据类型。
既然是一个变量，那么是不是就可以当做参数传递给其他函数呢？

回调函数不是一种具体的函数，而是一种函数的使用方式，由此我们给出定义：

将函数作为参数传递给另外一个函数，然后在另外一个函数内调用这个函数。

简单示例：

// 函数f，接收一个函数类型的参数：func
function f(func) {
	func();
}

我们声明了一个函数f，然后它接收一个参数 func，是一个函数类型，既然是函数，在函数f内就可以直接调用了。

在声明一个函数b：

function b(){
	console.log(1);
}

现在来调用一下函数f，传入函数b：

f(b); // 控制台输出1

最终，控制台输出：1。

当然我们也可以直接传入一个匿名函数：

f(function(){
	console.log(1);
});

虽然这边处理的还不完善，但是这个就是回调函数最简单的原型了，在js语言中大量使用了这种方式，下面我们尝试应用一下。

回调函数应用

js语言中大量使用回调函数处理的机制，比如常见的两个定时器：setTimeout、setInterval，还有事件机制等等。

这边我们先学习两个定时器 setTimeout、setInterval，事件机制我们留到后续讲解bom模型的时候再进行说明。

setTimeout函数

setTimeout 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

语法格式有如下两种：

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(函数, 等待的毫秒数)

其中：

第一个参数 是要执行的代码，可以一段代码或者是一个函数。
第二个参数 是一个数字，以毫秒为单位，例如：1000，表示1秒。

示例1，3秒后弹出提示框，显示：你好。

setTimeout("alert('你好')", 3000);

这边是一个非常简单的示例，如果我们要实现一个比较复杂的功能，用函数封装就比较好了。

示例2，3秒后在控制台输出1~10。

因为这边涉及到一个循环语句，用函数进行封装会更加合适。

setTimeout(function() {
	for (let i = 1; i <= 10; i++) {
		console.log(i);
	}
}, 3000);

这边第一个参数是一个函数，传递给 setTimeout 函数，setTimeout 函数内部过了3000ms后，就会调用这个函数了。

setInterval函数

setInterval 函数类似 setTimeout，只是 setInterval 是每间隔指定的毫秒数就调用函数或计算表达式一次。

语法格式有如下两种：

setInterval(要执行的代码, 间隔的毫秒数)
setInterval(函数, 间隔的毫秒数)

其中：

第一个参数 是要执行的代码，可以一段代码或者是一个函数。
第二个参数 是一个数字，以毫秒为单位，例如：1000，表示1秒。

示例1，在页面间隔每秒分别打印1,2,3,4,…。

let i = 1;
setInterval(function() {
	document.write(i);
	i++;
}, 1000);

setInterval 在js中应用广泛，经常用来做定时器类相关的东西。

示例2，在页面依次从1秒计时到10秒，然后结束。

1）首先需要有一个地方显示数字，我们写一个div用来显示数字：

<div id="num"></div>

2）开启定时器，使用 dom 模型操作div的内容：

let i = 1;
setInterval(function() {
	document.getElementById("num").innerHTML = i;
	i++;
}, 1000);

只是这个定时器好像跑了，就停不下来了，我们可以用 clearInterval 进行终止。

3）终止定时器，setInterval 返回一个变量timer，然后调用 clearInterval 函数终止：

let i = 1;
let timer = setInterval(function() {
	document.getElementById("num").innerHTML = i;
	i++;
	if (i > 10) {
		clearInterval(timer); // 终止定时器
	}
}, 1000);

本节总结

回调函数不是具体的函数，只是函数的一种使用方式。
回调函数就是函数接收的参数是函数类型，可以对其进行调用。
setTimeout和setInterval是js中常用的定时器函数，接收函数参数。

练习题

输入一个秒数, 然后开始倒计时到0秒, 最多10000秒。
计算现在到明年09-01的时间差, 然后开始倒计时,并输出在页面上, 输出格式: x天x小时x分钟x秒。
使用js做一个电子表, 显示当前时间，格式为: yyyy-mm-dd hh:mm:ss, 并能够随时间跳动，可以参考js时间对象。

码农公寓