10-回调函数
晴空闲云 563 1

本节目标

  1. 掌握回调函数的概念。
  2. 掌握回调函数的应用: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);

本节总结

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

练习题

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

索引目录