详解节流防抖

//定时器内部清除定时器，但这一次的timer已经生成，所以里面的代码都会执行
 var timer=setInterval(() => {
            console.log(7);  //7 打印一次
            clearInterval(timer) // 8也会打印
            console.log(8); //8 打印一次
         
        }, 2000);
1
2
3
4
5
6
7

//外部清除先解析到清除语句，则timer不会执行
 var timer=setInterval(() => {
            console.log(7); //不打印
            console.log(8);  //不打印
         
        }, 2000);

        clearInterval(timer)
1
2
3
4
5
6
7
8

节流简单来说就是在当前函数完成前的重复多次点击当中，只执行第一次点击，在第一次点击完成前，后面的点击都会无效

应用场景：用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。

// 节流函数
function throttle(fn, delay = 200) {  //delay默认值给200，若调用重新传参会变化
  let  timer = 0
    if(timer){
      return
    }
    timer = setTimeout(() =>{
      //执行相应的语句
      fn.apply(this, arguments); //this指向全局，arguments是throttle函数的参数
      timer = 0
    },delay)
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13

防抖跟节流正好相反，防抖是在多次点击中，只执行最后一次，前面的点击都会被取消（应用于输入框可以延迟触发等）

//防抖函数
function debounce(fn, delay = 500) {
    let timer = 0
    return function () {  //return返回一个函数，利用闭包的性质，控制timer
     if(timer){
      clearTimeout(timer)  //清除定时器即可清除fn函数
    }
    timer = setTimeout(() => {
     //执行相应的语句
      fn.apply(this, arguments); //this指向全局，arguments是debounce函数的参数
      timer = 0
    },delay)
    }

}
function name(params) {
    console.log(111);
}
const a = debounce(name,1000)
a()
a()
a()
//只打印一次111
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算
区别仅仅在：
他们在定时器已经有任务的时候的操作的不同。在我们上面介绍了防抖和节流的概念之后，大家应该都懂了。
防抖函数在每一次都有内容后进行清除是为了保证当前执行的函数就是当前规定的时间内执行的最后一次操作

 if(timer){
  clearTimeout(timer)
}
1
2
3

节流函数如此操作是为了保证，在规定的时间内只会执行一次这个操作

if(timer){
  return
}
1
2
3

js中的异步操作有哪些：

1. setTimeout、setInterval
2. Ajax请求一般采用异步
3. promise.then
4. 回调函数可以理解为异步，但不是严格的异步操作（回调函数其实是帮助解决异步问题常用的方法，但是他不会等待，不会延迟，除非加了定时器）
5. 事件监听。即监听某个事件，当事件发生时，再执行相应的操作（比如点击、mouseover等）。