JS 防抖和节流

防抖（debounce）

1. 什么是防抖

在时间被触发n秒后再执行回调函数，若在这n秒中又被触发，则重新计时n秒。

2. 使用场景

2.1 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
2.2 window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

3.原理

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发

4. 实现

代码说明：
1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；
2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；

节流

1. 什么是节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数，节约流量。
节流会稀释函数的执行频率。
对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2. 使用场景

2.1 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
2.2 在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
2.3 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

3. 原理

每次触发事件时都判断当前是否有等待执行的延时函数

4. 实现

参考链接：https://www.jianshu.com/p/c8b86b09daf0