js防抖和节流

---

前言

在进行窗口的操作或者输入框操作是，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用评率，同时又不影响实际效果。

一、函数防抖

单位时间内，频繁触发一个事件，以最后一次触发为准。
防抖的实现：
1.声明一个全部变量存储定时器ID。
2.每一次触发交互的时候，先清除上一次的定时器，然后开启本次定时器。

      //输入框事件
      let timeID = null
      document.querySelector('input').oninput = function () {
        //1先清除之前的定时器
        clearTimeout(timeID)
        //2.开启本次定时器
        timeID = setTimeout(() => {
          console.log(`发送ajax,搜索的内容是${this.value}`)
        }, 500)
      }

二、函数节流

单位时间内，频繁触发一个事件，只会触发一次。
节流的实现：
1.声明一个全局变量存储触发事件。
2.每一次触发事件，获取当前时间。
3.判断当前时间与上一次触发事件，是否超过了间隔。
4.如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。

    //声明一个全局变量存储触发时间
    let lastTime = null
    //页面滚动事件
    window.onscroll = function () {
      //1.每一次触发 先获取本次时间戳
      let currentTime = Date.now()
      //2.判断当前时间 与 上次触发时间 是否超过间隔
      if (currentTime - lastTime >= 500) {
        console.log(document.documentElement.scrollTop)//获取滚动距离
        //3.存储本次的触发时间
        lastTime = currentTime
      }
    }

总结

函数防抖：
将几次操作合并为一次操作进行。原理是维护一个定时器，规定在延迟时间后触发函数，只有最后一次操作能被触发。
函数节流：
使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
应用场景：
防抖:search联想搜索，用户在不断输入内容的时候，用防抖来节约请求资源。window触发resize时候，不断调整浏览器窗口大小会不断的触发这个事件，用防抖让其只触发一次。
节流：鼠标不断点击（mousedown）触发，让其单位时间内只触发一次。
监听滚动事件，滑到底部自动加载更多。