节流与防抖

节流与防抖

这篇总结主要讲解了节流与防抖的使用以及源码分析

函数防抖

单位时间内，频繁触发事件，只会触发最后一次
应用场景：输入框搜索
1.函数防抖流程 ：
声明全局变量存储定时器ID
每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中

<input type="text" placeholder="请输入文本">
<script>
   /* 
 1.函数防抖 :  单位时间内，频繁触发事件，只会触发最后一次
 2.经典应用场景 ： 输入框输入事件
 3.函数防抖流程 ：
        3.1 声明全局变量存储定时器ID
        3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
    */
   let input = document.querySelector('input')
   let timeID
   input.addEventListener('input',function(){
    clearTimeout(timeID)
    timeID = setTimeout(()=>console.log(input.value),500)
   }) 
</script>

2.lodash实现函数防抖
引用lodash库
语法：_.debounce(事件处理函数,防抖间隔时间)

第一步：引入lodash库
<script src="lodash.js"></script>
第二步：
<input type="text" placeholder="请输入文本">
<script>
    /* 
 1.函数防抖 :  单位时间内，频繁触发事件，只会触发最后一次
    2.经典应用场景 ： 输入框输入事件
    3.函数防抖流程 ：
        3.1 声明全局变量存储定时器ID
        3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
    */
   let input = document.querySelector('input')
   input.addEventListener('input',_.debounce(function() {
    console.log(input.value)
   },500))
</script>

3.自己封装一个函数防抖

<input type="text" placeholder="请输入文本">
<script>
    // 利用防抖实现性能优化
    //需求：键盘文字防抖处理
    const input = document.querySelector('input')
    function debounce(callback, time) {
      let timeID
      return function () {
        clearTimeout(timeID)
        timeID = setTimeout(callback, time)
      }
    }
    input.addEventListener('input',debounce(function(){
      console.log(input.value)
    },500))
  </script>

函数节流

单位时间内，频繁触发事件，只会触发一次
应用场景：高频事件，降帧处理（滚动条，鼠标移动）

loadeddata事件：视频加载好了触发
timeupdate事件：视频播放时间变化了触发
currentTime： 属性会以秒为单位返回当前媒体元素的播放时间。
设置这个属性会改变媒体元素当前播放位置。

1.函数节流流程
声明全局变量存储上一次触发交互时间
每一次触发事件, 获取当前时间 与 上一次时间做比较。判断是否超过节流间隔
如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。

let timeID = null
let i = 1
window.addEventListener('mousemove',function(){
    if(!timeID) {
        timeID = setTimeout(function() {
        timeID = null
        console.log(i)
        i++
        },2000)
    }
})

2.lodash实现函数节流

let i = 1
window.addEventListener('mousemove',_.throttle(function(){
    console.log(i)
    i++
},1000))

3.自己封装一个函数节流

function throttle(callback, time) {
      // 1.声明一个变量储存id
      let timeID = null
      return function () {
        // 2.开始节流
        if (!timeID) {
          timeID = setTimeout(function () {
            timeID = null
            callback()
          }, time)
        }
      }
}
let fn = throttle(function () {
  console.log(222)
}, 500)
window.addEventListener('mousemove', fn)