前端防抖与节流

1、防抖

  1.1 定义：

    在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

  1.2 应用场景：

    (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；

    (2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

2、节流

  2.1 定义：

    规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

  2.2 应用场景：

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

    (2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

    (3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

3、总结

  3.1 原理

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

    节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。