AJAX第一天（2022.1.12）

服务器

上网过程中，负责 存放和对外提供资源 的电脑，叫做服务器

客户端

在上网过程中，负责 获取和消费资源 的电脑，叫做客户端

URL的概念

URL（全称是 UniformResourceLocator） 中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。

URL的组成

URL地址一般由三部分组成:

• 客户端与服务器之间的 通信协议 （http/  或者  https/）

• 存有该资源的 服务器名称 （www.cnblogs.com）

• 资源在服务器上 具体的存放位置 （liulongbin/p/11643191.html）

• <a href="http/www.cnblogs.com/liulongbin/p/11643191.html"></a>

客户端与服务器通讯过程

1.客户端请求服务器

2.服务器处理这次请求

3.服务器响应客户端

详细的分解：用户的电脑（客户端）

                     1.打开浏览器

                     2.输入要访问的网站地址

                     3.回车，向服务器发起资源请求

WEB服务器

                      1.服务器接收到客户端的资源请求

                      2.服务器在内部处理这次请求，找到相关的资源

                      3.服务器把找到的资源，响应（发送）给客户端

注意：

• 客户端与服务器之间的通讯过程，分为： 请求-处理-响应 三个步骤

• 网页中每一个资源，都是通过 请求-处理-响应 的方式从服务器获取回来

网页中如何请求数据

如果要在网页中请求服务器上的数据资源，需要用到 XMLHttpRequest 对象

XMLHttpRequest（简称 xhr）是浏览器提供的JS成员，通过它，可以请求服务器上的数据资源

最简单的用法 var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式 有很多种，最常见的两种请求方式分别是 get 和 post 请求

• get 请求，通常用于 获取服务器资源（要资源）

  例如：根据 URL 地址，从服务器获取 HTML文件、css文件、js文件、图片文件、数据资源等

• post 请求，通常用于 向服务器提交数据（送资源）

  例如：登录时，向服务器 提交登录信息、注册时向服务器 提交注册信息、添加用户时向服务器 提交用户信息等各种 数据提交操作

什么是Ajax

Ajax 的全称是 Asynchronous JavaScript And XML（异步 JavaScript 和 xml）

通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax

为什么要学Ajax

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但还是，Ajax能让我们轻松实现 网页 与 服务器之间的 数据交互

Ajax应该用场景

场景一：用户名检测

注册用户时，通过 ajax 的形式，动态 检测用户名是否被占用

场景二：搜索提示

当输入搜索关键字时，通过 ajax 的形式，动态 加载搜索提示列表

场景三：数据分页显示

当点击页码值得时候，通过 ajax 的形式，根据页码值动态刷新表格的数据

场景四：数据的增删改查

数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列Ajax相关的函数，极大地 降低了Ajax的使用难度

jQuery中发起 Ajax 请求最常用的三个方法如下：

• $.get() get方式请求，用于获取数据

• $.post() post方式请求，用于提交数据

• $.ajax() 比较综合，既可以获取数据，又可以提交数据。

$.get() 函数介绍

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用

$.get(url,[data],[callback])

$.get()发起不带参数的请求

使用 $.get() 函数 发起不带参数的请求时，直接提供给 请求的 URL 地址 和 请求成功之后的回调函数 即可，示例代码如下

    $.get('http/www.liulongbin.top:3006/api/getbooks',function(res){
        console.log(res); // 这里的 res 是服务器返回的数据
    })

$.get()发起携带参数的请求

使用$.get() 发起携带参数的请求，那么携带的参数应该写在第二个参数的位置，示例代码如下：

    $.get('http/www.liulongbin.top:3006/api/getbooks',{ id : 1 },function(res){
        console.log(res); 
    })

$.post() 函数介绍

jQuery 中 $.post() 函数的功能单一，专门用来发起post请求，从而向服务器提交数据

$.post() 函数的语法如下：

$.post(url,[data],[callback])

参数各自代表的含义如下：

$.post() 向服务器提交数据

使用 $.post() 向服务器提交数据的示例代码如下：

    $.post(
        'http/www.liulongbin.top:3006/api/getbooks', // 请求的 url 地址
        { bookname : '水浒传',author:'施耐庵',publisher:'上海图书出版社' }, // 提交的数据
        function(res){ // 回调函数
        console.log(res); 
    })
​
    // 返回的结果 ： {"status":201,"msg":"添加图书到成功"}

$.ajax() 函数介绍

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

$.ajax() 函数的基本语法如下：

$.ajax({
        type:'',  // 请求的方式  例如 GET 或 POST
        url:'',  // 请求的 URL 地址
        data:'',  // 这次请求要携带的数据
        success:function(res){}  // 请求成功之后的回调函数
})

$.ajax() 发起 get 请求

使用 $.ajax() 发起 GET 请求时，只需要将 type 属性 的值设置为 ‘GET’ 即可：

   $.ajax({
               type:'GET',  // 请求的方式  
            url:'http/www.cnblogs.com/liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
            data:{id:1},  // 这次请求要携带的数据
            success:function(res){ // 请求成功之后的回调函数
                console.log(res);
            } 
        })

$.ajax 发起 post 请求

使用 $.ajax() 发起 post请求，只需要把 type属性的值 设置为 ‘post’ 即可

   $.ajax({
        type:'POST',  // 请求的方式  
        url:'http/www.cnblogs.com/liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
        data:{  // 要提交给服务器的数据
            bookname:'水浒传',
            author:'施耐庵',
            publisher:'上海图书出版社'
                    },  
    success:function(res){ // 请求成功之后的回调函数
        console.log(res);
    } 
})

接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做 数据接口（简称接口）。同时，每个接口必须有请求方式。

接口测试工具

什么是接口测试工具

为了验证接口是否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测

好处：接口测试工具能让我们在 不写任何代码 的情况下，对接口进行 调用 和 测试

常用的就是：PostMan

什么是接口文档

接口文档，顾名思义就是 接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对 接口URL，参数 以及 输出内容 的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用

接口文档的组成部分

接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：

• 接口名称：用来标识各个接口的简单说明，如 登录接口，获取图书列表接口等

• 接口URL：接口的调用地址

• 调用方式：接口的调用方式，如 GET 或者 POST

• 参数格式：接口需要传递的参数，每个参数必须包含 参数名称、参数类型、是否必选、参数说明 这4项内容

• 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容

• 返回示例（可选）：通过对象的形式，列举服务器返回数据的结构

AJAX第二天（2022.1.13）

<form> 标签的属性

action

action 属性用来规定当提交表单时，向何处发送表单数据。（action:可以指定表单的数据提交到指定网站）

action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。

当 <form>表单在未制定 action 属性值的清空下，action的默认值为当前页面的 URL 地址

注意: 当提交表单后，会立即跳转到 action 属性指定的 URL 地址

target

target 属性用来规定 在何处打开 action URL

它的可选值有5个，默认情况下，target的值是 _self，表示在相同的框架中打开 action URL

method

method 属性用来规定 以何种方式 把表单数据提交到 action URL

它的可选值有两个，分别是 get 和 post

默认情况下，method的值为 get， 表示通过URL地址的形式，把表单数据提交到 action URL

注意：

• get 方式适合用来提交少量的，简单的数据

• post 方式适合用来提交大量的，复杂的，或包含文件上传的数据

enctype

enctype属性用来规定在 发送表单数据之前如何对数据进行编码

它的可选值有三个，默认情况下，enctype的值为 application/x-www-form-urlencoded，表示在发送前编码的所有字符

表单的同步提交及缺点

什么是表单的同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交

表单同步提交的缺点

• <form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差

• <form> 表单同步提交后，页面之前的状态和数据会丢失

如何解决呢？表单只复杂采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件

  // 第一种方式
  $('#f1').submit(function () {
    alert('监听到了表单的提交事件')
  })

  // 第二种方式
  $('#f1').on('submit', function (e) {  
    alert('监听到了表单的提交事件2')
  })

阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转

  // 第一种方式
  $('#f1').submit(function (e) {
    alert('监听到了表单的提交事件')
    // 阻止表单的提交和页面的跳转
    e.preventDefault()
  })

  // 第二种方式
  $('#f1').on('submit', function (e) {  
    alert('监听到了表单的提交事件2')
     // 阻止表单的提交和页面的跳转
    e.preventDefault()
  })

如何快速获取表单数据

serialize() 函数

为了简化表单中数据的获取操作，jQuery提供了 serialize() 函数，语法格式如下：

$(selector).serialize()

好处：可以一次性获取表单的数据

示例代码：

<form id="form1">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">提交</button>
</form>
    $('#form1').serialize()
    // 调用的结果 ：
    // username=用户名的值$password=密码的值

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性

模板引擎相关概念

之前在渲染UI结构时候，拼接字符串是比较麻烦的，而且很容易出现问题，模板引擎，它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的HTML页面。

好处

• 减少了字符串的拼接操作

• 使代码结构更清晰

• 使代码更易于阅读与维护

原文输出 {{@ value }}

条件输出

{{if value}} 按需输出的内容 {{/if}}

{{if vl} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

循环输出  {{each arr}}

                      {{$index}} {{$value}}

               {{/each}}

过滤器

过滤器本质就是一个 function 函数

语法 {{value | dateFormat （可自定义命名）}}

过滤器语法类似于 管道操作符，它的上一个输出作为下一个输入

定义过滤器的基本语法如下：

template.defaults.imports.dateFormat = function (value)) {/return处理的结果/ }

模板引擎的实现原理

正则与字符串操作

exec函数

exec() 函数用于 检索字符串 中的正在表达式的匹配

如果字符串中又匹配的值，则返回该匹配值，否则返回 null

RegExpObject.exec(string)

示例代码如下:

var str1 = 'hello'
var pattern1 = /o/
var result1 = pattern1.exec(str1)
console.log(result1) //结果是：['o', index: 4, input: 'hello', groups: undefined]

// 也可以直接写下面的代码
var str1 = 'hello'
var pattern1 = /o/	
// 结果是：['o', index: 4, input: 'hello', groups: undefined]
console.log(pattern1.exec(str1))

分组

正则表达式中 （） 包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容，示例代码如下:

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/

var patternResult = pattern.exec(str)
console.log(patternResult);
// 得到 name 相关的分组信息
// ["{{name}}","name",index: 7 ,input:"<div>我是{{name}}</div>"，groups:undefined]

字符串的 replace 函数

replace() 函数用于在字符串中 用一些字符 替换 另一些字符的

var result = '123456'.replace('123','abc') // 得到 result 的值为字符串 'abc456'

示例代码：

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/

var patternResult = pattern.exec(str)
// console.log(patternResult)
str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
  // 输出的内容是：<div>我是name</div>
console.log(str)

多次replace

 <script>
  var str = '<div>{{name}}今年{{ age }}岁了</div>'
  var pattern = /{{\s*([a-zA-Z]+)\s*}}/
// 第一次匹配
var res1 = pattern.exec(str)
str = str.replace(res1[0], res1[1])
console.log(str)  // 输出 <div>name今年{{ age }}岁了</div>

// 第二次匹配
var res2 = pattern.exec(str)
str = str.replace(res2[0], res2[1])
console.log(str) // 输出 <div>name今年age岁了</div>

// 第三次匹配
var res3 = pattern.exec(str)
console.log(res3)  // 输出 null
</script>

使用循环来replace

<script>
  var str = '<div>{{name}}今年{{ age }}岁了</div>'
  var pattern = /{{\s*([a-zA-Z]+)\s*}}/
  
var patternResult = null
while (patternResult = pattern.exec(str)) {
  str = str.replace(patternResult[0], patternResult[1])
}
console.log(str)  // 输出<div>name今年age岁了</div>
</script>

替换成真实内容

<script>
  var data = { name: '张三', age: 20 }
  var str = '<div>{{name}}今年{{ age }}岁了</div>'
  var pattern = /{{\s*([a-zA-Z]+)\s*}}/

  var patternResult = null
  while (patternResult = pattern.exec(str)) {
    str = str.replace(patternResult[0], data[patternResult[1]])
  }
  console.log(str)  // 输出结果是：<div>张三今年20岁了</div>
</script>

AJAX第三天（2022.1.15）

XMLHttpRequest的基本使用

什么XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。

提问：能否直接使用xhr对象发起Ajax请求？是可以的。

使用xhr发起GET请求

步骤

• 创建 xhr 对象

• 调用 xhr.open() 函数

• 调用 xhr.send() 函数

• 监听 xhr.onreadystatechange 事件

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     // 获取服务器响应的数据
     console.log(xhr.responseText)
   }
}

了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：

xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')

这种在 URL 地址后面拼接的参数，叫做查询字符串。

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.send()
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     console.log(xhr.responseText)
  }
}

查询字符串

什么是查询字符串

定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。

使用xhr发起POST请求

步骤

• 创建 xhr 对象

• 调用 xhr.open() 函数

• 设置 Content-Type 属性（固定写法）

• 调用 xhr.send() 函数，同时指定要发送的数据

• 监听 xhr.onreadystatechange 事件

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数  同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 5. 监听事件
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

数据交换格式

什么是数据交换格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式

前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是JSON。

什么是XML

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。

XML和HTML的区别

XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。

• HTML 被设计用来描述网页上的内容，是网页内容的载体

• XML 被设计用来传输和存储数据，是数据的载体

XML的缺点

• XML 格式臃肿，和数据无关的代码多，体积大，传输效率低

• 在 Javascript 中解析 XML 比较麻烦。

什么是JSON

概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。

作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。

JSON的两种结构

JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。

对象结构

对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。（不能出现undefined和函数）

数组结构

数组结构在 JSON 中表示为 [ ] 括起来的内容。

数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。（不能出现undefined和函数）

JSON语法注意事项

① 属性名必须使用双引号包裹

② 字符串类型的值必须使用双引号包裹

③ JSON 中不允许使用单引号表示字符串

④ JSON 中不能写注释

⑤ JSON 的最外层必须是对象或数组格式

⑥ 不能使用 undefined 或函数作为 JSON 的值

JSON 的作用：在计算机与网络之间存储和传输数据。

JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

JSON和JS对象的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息。

提问：为什么需要将js对象转化为json格式的字符串？

因为传输数据只能是字符串，所以只能传json字符串。

序列化和反序列化

把数据对象 转换为 字符串的过程，叫做序列化，也就是说使用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

把字符串 转换为 数据对象的过程，叫做反序列化，也就是说使用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

XMLHttpRequest Level2的新特性

旧版XMLHttpRequest的缺点

• 只支持文本数据的传输，无法用来读取和上传文件

• 传送和接收数据时，没有进度信息，只能提示有没有完成

XMLHttpRequest Level2的新功能

• 可以设置 HTTP 请求的时限

• 可以使用 FormData 对象管理表单数据

• 可以上传文件

• 可以获得数据传输的进度信息

什么是axios

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

axios发起GET请求

axios 发起 get 请求的语法：

axios.get('url', { params: { /*参数*/ } }).then(callback)

axios发起POST请求

axios 发起 post 请求的语法：

axios.post('url', { /*参数*/ }).then(callback)

直接使用axios发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)

AJAX第四天（2022.1.17）

什么是同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。（如果没有给端口号，就默认是80）

什么是同源策略

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能

MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这

是一个用于隔离潜在恶意文件的重要安全机制。（简单来说就是说：非同源网站之间不允许进行资源交互）

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

② 无法接触非同源网页的 DOM

③ 无法向非同源地址发送 Ajax 请求

什么是跨域

同源指的是两个页面的协议、域名、端口一致，反之，只要有一个不相同，就是跨域。

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

如何实现跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。

JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求（所以写的时候，可以不用请求类型，因为默认的就是GET请求），不支持 POST 请求。

CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器

什么是JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。

因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

JSONP的缺点

由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求（因为只支持GET请求，所以可以用type，默认的就是GET)，不支持 POST 请求。

注意： JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象。(JSONP是js的脚本）

防抖&节流

什么是防抖

防抖策略（debounce）是当事件被触发后，延迟一段时间后再执行。如果再一段时间里又被触发的话，则又重新计算。

好处：能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会执行最后一次，节省了请求资源。

防抖的应用场景

1. 在输入框输入

2. 浏览器窗口大小不断调整。

什么是节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。

节流的应用场景

1.鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

2.懒加载

3.轮播图....

节流阀的概念：

节流阀为空，表示 可以进行下次操作；不为空，表示不能执行下次操作。

当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。

每次执行操作前，必须先判断节流阀是否为空。

总结防抖和节流的区别

• 防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效.前面多次的触发都会被忽略.

• 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件.