一.防抖和节流都是用来减少出发的频率的问题,常见的应用场景, 防抖:点击登录按钮的时候,输入框输入自己想要的内容的时候,节流:滚动条等

二.防抖

(1)代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过cdn加载的形式引入jq -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    
</head>
<body>
    <button>点击发送ajax请求</button>
</body>
<!-- 导入axios -->

<script>

    let btn=document.querySelector('button')
    // console.log(btn);
    function fangdou(){
    let timer=null
    return function(){
        // -----------------------------------------------
        // 清除定时器
        // 通过作用域的查找机制可以访问
        clearTimeout(timer)
        // 开启定时器并且取名字
        timer=setTimeout(() => {
        console.log(123);
            $.ajax({
                url:'https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test',
                type:"get" , //请求方式
                dataType:"text",//设置接受到的响应数据的格式
            })
        }, 2000);
        // ----------------------------------------------
    }
}
btn.addEventListener('click',fangdou())
var aa=fangdou()
console.log(aa);
// 这一段代码是如何进行走的
// 注意返回的是 一个函数 ,但是调用了里面的代码
</script>
</html>

(2)图示

点击一次的结果发送一次请求

?持续点击不执行?

一段时间不触发后再执行

(3)代码思路的解析

点点击按钮之后会调用fangdou()这个函数, js是单线程的语言从上到下运行的,声明一个变量并将设? 置为空,?let?timer=null(为后面定时器取名字做准备), 为后面清除定时器做铺垫,通过return 出去一个函数以闭包的形式。通过clearTimeout(timer)清除定时器。通过代码:

timer=setTimeout(()?=>?{
????????????$.ajax({

????????????????url:'https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test'
????????????????type:"get"?,?//请求方式

????????????????dataType:"text",//设置接受到的响应数据的格式

????????????})

????????},?2000);

开启定时器,并且发送请求,总的来说,当用户点击按钮,如果2000之内点击会被清空,持续出发不执行,一段时间不触发之后在去执行。

有人就好奇,点击调用函数返回的不是一个函数吗?

var aa=fangdou()
console.log(aa);

打印的结果如图:

?确实是一个函数。但是里面的函数也被调用过了。

三.节流

(1)代码：

用定时器实现节流的效果

var flag=true
    document.onscroll=function(){
      if (flag) {
        console.log(1);
        flag=false
        setTimeout(() => {
          flag=true
        }, 3000);
      }
    }

代码分析:

1.声明变量flag为true