防抖(debounce)

  • 对于短时间内连续触发的事件（比如滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。
  • 如果短时间内大量触发同一事件，只会执行一次函数。

  • 多次成一次

    1. function debounce (timeout, fn) { // 接受延迟时间,函数
    2.           let _time = null  // 定义一个变量 
    3.           return function () { // 套用闭包 当debounce函数第一次被调用时 直接返回改函数 考虑维护全局纯净 使用闭包
    4.               clearTimeout(_time) // 清楚定时器
    5.               _time = setTimeout(() => { // 给_time变量赋值为一个定时器
    6.                   fn.apply(this)    // 使用apply调用fn函数
    7.               }, timeout) // setimeout的延迟调用时间
    8.           }
    9. }
    10. function scrollTop(){
    11.       let scrollTop = document.documentElement.scrollTop
    12.       console.log(scrollTop,'scrollTop'); // 执行打印
    13. }
    14. window.onscroll = debounce(2000,scrollTop) // 页面滚动调用函数

    节流(throttle)

  • 我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活

  • 一段时间内的次数 变成一次
  1. function throttling (timeout, fn) {
  2.             let _playing = null // 定义一个变量
  3.             return function () { // 返回一个函数
  4.                 let _arg = arguments // 接受实参
  5.                 if (_playing) { // 判断_playing
  6.                     return // 如果为true 终止函数执行 直接return 
  7.                 }
  8.                 _playing = true // 赋值变量
  9.                 setTimeout(() => { // 定时器
  10.                     fn.apply(this, _arg) // 更改this指向 并且执行代码
  11.                     _playing = false //  赋值变量 
  12.                 }, timeout) // 定时器时间
  13.             }
  14.  }
  15. function btn_click(){
  16.             console.log('1');
  17. }
  18. btn.onclick =  throttling(1000, btn_click)

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

  1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
  2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

  3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存

    函数节流的应用场景

    间隔一段时间执行一次回调的场景有：

  4. scroll 事件，每隔一秒计算一次位置信息等

  5. 浏览器播放事件，每个一秒计算一次进度信息等