共同作用: 降低ajax请求频率

防抖(debounce):

1. 说明:

  • 当事件触发时，相应的请求函数并不会被立即触发，而是会先等待一定的时间
  • 当事件频繁触发时，请求函数的触犯会被频繁的推迟
  • 只有等待了一段时间也没有事件触发，才执行请求函数
  • 策略是当事件被触发时设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。

image.png

2.应用场景

  • 输入框中频繁的输入内容，搜索或者替换提交信息
  • 频繁的点击按钮，触发某个事件
  • 监听浏览器滚动事件，完成某些特定操作
  • 用户缩放浏览器的 resize 事件

    3.实现

    简单版:

    ```javascript data () { return { timer:’’ } } // 举例: 发生在input事件中 input () { clearTimeout(this.timer) this.timer = setTimeout(async () => {
    1. try {
    2.      // 省略代码...
    3.      // 发送ajax请求 
    4. }
    },1000) }
  1. <a name="HmWh2"></a>
  2. ####  说明原理: timer设置为空,第一次关闭定时器,然后每次每次用户触发input事件,只要时间在我定时器
  3. <a name="CMuq7"></a>
  4. ####                 里规定的时间(这里是1秒),就会一次一次被清除,就不会触发ajax,但是只要时间超过了我设
  5. <a name="NbSCV"></a>
  6. ####                 置的时间,就会触发ajax请求
  7. <a name="VnaPA"></a>
  8. ##  升级版: 
  10. ---
  13. <a name="vFbOo"></a>
  14. # 节流(throttle):
  15. <a name="LEn5R"></a>
  16. # <br />1. 说明:
  18. - 当事件频繁触发时，相应的请求函数在规定的执行周期内只触发一次
  19. - 要想再次触犯时，那么就只能大于设定的执行周期后才能再次触发
  20. - 节流的策略是，固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期
  22. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1623513328372-78d4942d-99ef-4883-ad1f-75b94bd96792.png#clientId=ud8829a20-22b0-4&from=paste&height=333&id=u7bc1101e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=333&originWidth=589&originalType=binary&ratio=1&size=69117&status=done&style=none&taskId=u7813e887-3c40-48c1-9f2e-5278c75af18&width=589)
  23. <a name="Au8iP"></a>
  24. ## 2.应用场景:
  26. - 窗口调整（resize）
  27. - 页面滚动
  28. - dom 元素拖拽
  29. - 抢购疯狂点击
  30. <a name="nU5as"></a>
  31. ## 3.实现:
  32. <a name="SnOTp"></a>
  33. ##   简单版:
  34. ```javascript
  35. data: {
  36.   return {
  37.     startTime:0 // 最近一次成功调用ajax时间
  38.   }
  39. }
  41. input() {
  42.   const dt = Date.now() // 获取当前时间戳
  43.   if(dt - this.startTime > 500) {
  44.     // 发送ajax请求  省略...
  45.     this.startTime = dt
  46.   } else {
  47.     console.log('当前的时间戳是', dt , '距离上次执行不够500ms,所以不执行')
  48.   }
  49. }

说明原理: 两次相隔时间在500ms以上,就调用ajax请求

升级版:

总结:

  • 函数防抖：当事件多次发生时，需要发起多次的请求操作，而防抖就是将多次的请求操作合并为一次请求操作。

  • 防抖原理：维护一个计时器，规定在 delay 时间后触发函数，但是在 delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

  • 函数节流：当事件多次发生时，需要发起多次请求操作，而节流就是将多次的请求操作变为在规定的时间间隔内只发生一次请求操作，要想再次发生请求操作，那么便要等到下次时间间隔。

  • 节流原理：通过判断是否到达一定时间来触发函数。

防抖(debounce)和节流(throttle)答题技巧:

1.防抖是debounce,节流是throttle

2.共同点和不同点:

共同点: 降频

不同点: 实现思路的不一样 :

a)防抖: 某个时间内不能再次触发,一旦触发,就要重新计算时机 (例如: 等电梯:电梯延迟

5秒以后他才会上升,但是如果有人进来,它就再延迟5秒,还有人进来,它就继续又

延迟5秒)

b)节流: 限制相邻两次调用的时间间隔 (例如: 调小水龙头: 把水龙头调到一滴一滴的状

态,每一滴和上一滴的间隔时间都是相等的)

3.手写一个:

上课写的

高阶函数,做封装(在老师公众号上面 !!等看了老师的在做补充)

研究过underscore中的源码