JavaScript の 防抖与节流

防抖

单位时间内，频繁触发事件，只执行最后一次，底层就是用定时器实现的

• lodash实现

使用 _.debounce() 函数

语法：

_.debounce(fun,时间)

  mouse.addEventListener('mousemove',_.debounce(mouseMove,100))

• 手写实现

核心思路：利用延时函数(setTimeOut)实现

1. 声明定时器变量
2. 每次事件触发都判断是否有定时器，如果有就先清除以前的定时器
3. 打开定时器

    let time
    function mouseMove()
    {
      if(time)
      {
        clearTimeout(time)
      }
      time = setTimeout(function(){
        n+=1
        mouse.innerHTML=n
      },1000)
    }
    mouse.addEventListener('mousemove',mouseMove)

节流

单位时间内，频繁触发事件，只执行一次

多用于高频事件如：mousemove，resize，scroll

与防抖的区别：同样是面对频繁触发的事件，防抖是需要等到设定时间内事件不再触发的时候才执行，也就是说要停下来一段时间才执行，节流是设定时间内只执行一次，不需要停下来

• lodash实现

    mouse1.addEventListener("mousemove",_.throttle(function(){
      m+=1
      mouse1.innerHTML=m
    },500))

• 自己手写实现

同样是使用延时函数setTimeOut

    let time1
    mouse1.addEventListener("mousemove",function(){
      if(time1==0)
    {
      return
    }
    else
    {
      time1 = setTimeout(function(){
        m+=1
        mouse1.innerHTML=m
        time1=1
      },500)
      time1=0
    }
    })