JavaScript学习笔记（十六）

欢迎大家来到IT世界,在知识的湖畔探索吧!

前面在学习循环的时候我们提到过foreach、map等方法，当时没有展开学习，是因为这些方法都有一个特点，即他们都是以回调的形式来执行的。回调函数是指被当做参数传递给另一个函数的函数，通俗一点理解就是函数成为了参数。回调函数不会在传参的时候执行，而是会在被传参的函数体内调用的时候执行。

fn1函数有一个callback的回调函数参数，在fn1函数体内，会先打印1，然后再调用callback函数。所以当我们调用fn1函数的时候，会按照fn1函数体内的顺序执行，即先执行console.log，再执行调用callback输出2。我们可以看到回调函数内的代码，不会在调用被传参函数时立即执行，而是遵循函数体内部的代码顺序。

把调用callback和console.log换下顺序

输出结果也响应的改变了顺序

注意，回调函数不是异步，不代表有回调就一定是异步操作，但是反过来，JS中很多异步操作都是通过回调函数的形式创建的。

那接下来，我们就一起来学习一下JS中的异步操作

一、异步

异步(async)是相对于同步(sync)而言的，我们都知道JS是一个按代码顺序执行的编程语言，也就是说JS会有一个完整的执行顺序，即从代码开头执行到代码的结束，但是，完全按照代码顺序执行就会存在一个问题，假设在代码执行过程中，某一个代码需要执行10秒钟，但是，这个代码的结果又不会影响到整个代码，即这个10秒钟执行的代码是一个单独的存在。按照JS原本的执行顺序，代码就会被卡在这个地方10秒钟，而不会继续进行。

完全按照执行顺序执行的代码

在执行这个10秒钟代码的时候，前面的代码被称为上文，后面的代码被称为下文，前后代码合起来被称为上下文，如果下文不需要这个10秒钟代码的运行结果，那么我们是不是可以将这10秒钟代码单独拿出来执行呢？

单独将这10秒钟代码拿出去执行，主程序就不会产生阻塞了

而这就是JS中的异步操作(async)，在JS中，常见的异步操作有

1、AJAX

2、定时器

3、事件监听

AJAX(AsynchronousJavascript AndXML)，中文全称异步JavaScript和XML，人家在名字上直接都标明了是异步JavaScript[狗头]，AJAX我们会放到后面学习

事件监听主要发生在浏览器上，例如监听鼠标位置的改变，监听按钮的状态等等，这一部分也会放在后面学习

定时器，JS的定时器分为两种，分别是setTimeout和setInterval，setTimeout是定时执行一次任务，setInterval则是定时循环执行任务

setTimeout(callback, delay)

setTimeout有两个参数，其中callback回调函数里面是要被定时执行的任务，delay是定时的时间，传参类型是Number，单位是毫秒

关于setTimeout，因为是异步的，所以我们可以用它来模拟异步场景

模拟一个不需要依赖上下文的程序

可以看到setTimeout的上下文执行速度很快，只有1毫秒的执行时间，而异步任务则执行了大约1000毫秒

再来看一个例子

我们创建了2个异步任务

可以看到程序上下文还是执行的非常快，甚至没有1毫秒，而2个异步任务和程序上下文之间有大约1000毫秒的差距，但是两个异步任务之间并没有时间差。

这就是异步任务的作用，异步任务和程序上下文不存在阻塞问题(如果存在阻塞，那图中的执行顺序应该是 程序上文 => 异步任务1 => 异步任务2 => 程序下文)，而且多个异步任务之间不存在阻塞问题，即多个异步任务都是单独执行的。虽然JS是单线程执行，但是异步任务的存在可以让JS同时处理多个任务，而不需要一个任务一个任务等待。

注意，异步任务是建立在你的任务和程序不存在上下文关系的情况下的，如果你的任务和主程序存在上下文关系，不能使用异步任务。

可以看到异步任务将num变量重新赋值，但是下文的num并没有发生改变，有没有可能是因为异步任务的delay太大了呢？

将delay改成0.1毫秒

num依然没有改变

可以看到即使delay变成了0.1毫秒，下文的delay依然没有被异步任务改变。所以异步任务是在主进程中单独开辟一条支线程，去执行相应的代码。

setInterval(callback, interval)

setInterval的写法和setTimeout类似，callback回调函数里面是需要被重复执行的代码块，而interval则是重复执行的间隔，数据类型是Number，单位是毫秒

可以看到setInterval会重复执行callback里面的代码，执行的间隔就是它的第二参数。

setInterval在程序不停止的情况下，不会停止循环，因此我们需要一个方法，去停止setInterval，这个方法就是clearInterval方法，又称为清理定时器

clearInterval在循环任务中非常重要，如果没有clearInterval，在程序未被终止的情况程序会一直进行循环任务，从而造成资源的浪费，甚至会造成内存泄露。

这篇文章我们学习了异步的概念，并用定时器模拟了异步操作，相信大家对整个JS的认知又更深了一点，当然，今天的异步只是一些基础的概念，在开发过程中的异步任务会大量存在，例如AJAX和事件监听，这在web开发和接口开发中都是大量存在的，所以我们一定要弄清楚异步的基本概念，这对以后进行开发会有很大的帮助。