js防抖和节流

一，防抖

1，定义
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间（就是之前的触发动作都是无效了，必须等一定时间）。即只要停止事件够长了，才会执行一次。
2,适用场景
高频触发的事件。例如keyup，onmousemove，onchange等事件，表单的的重复提交等
3,流程图

⑴非立即执行版本，单位事件内；事件触发多次，执行最后一次。

function debounce(fn,wait){//fn需要防抖事件，wait等待事件。
    let timer;
    return ()=>{
        if(timer){
            clearTimeout(timer)//移除上次操作。
        }
        timer=setTimeout(()=>{fn.apply(this,arguments)},wait)
    }
}

⑵立即执行版本，单位时间内，事件触发多次，执行第一次，后面的实效。

function debounce(fn,wait,immediately){
    let timer
    return function(){
        if(timer){clearTimeout(timer)}
        if(immediately){
            let runing=!timer//表示正在进行中的，其他的不能执行。
            timer=setTimeout(()=>{timer=null},wait)
            if(running){fn.apply(this,arguments)}
        }else{
            timer=setTimeout(()=>{fn.apply(this,arguments)},wait)
        }
    }
}

二，节流

1,定义
单位时间内，只会执行一次的函数。
2,使用场景
scroll等可能容易导频繁触发的事件，需要节流稀释发生的频率。
3,流程图

⑴定时器

function throttle(fn,wait){
    let timer=null
    return function(){
        if(!timer){
            timer=setTimeout(()=>{fn.apply(this,arguments)},wait)
            timer=null
        }
    }
}

⑵对比时间戳版

function throttle(fn,wait){
    let preTimer=new Date()
    return function(){
        if(new Date()>=preTimer+wait){
            fn.apply(this,arguments)
            preTimer=new Date()
        }
    }
}

二，利用debounce原理案例；判断鼠标是否是移动的，还是静止。

• 原理说明：
  ⑴定义一个变量moveTimeTag，通过window.addeventListener添加监听鼠标移动事件，每次鼠标移动moveTimeTag都为true
  ⑵设置一个延迟函数，延迟函数里面执行moveTag都为true
  ⑶每次触发鼠标移动事件，都对（2）的延迟函数通过clearSetTimeout清除。
  ⑷通过moveTimeTag为true判断鼠标是移动的，为false则是静止的。

  //vue版
  data:{
      return{
          moveTimeTag:false,//鼠标是否移动标志
          moveTimer:null //计数器
      }
  }
  methods:{
      handleMouseMove () {//类似于防抖
        if (this.moveTimer) {
          clearTimeout(this.moveTimer)//移除上次操作。
          this.moveTimeTag = true
        }
        this.moveTimer = setTimeout(() => {
          this.moveTimeTag = false
        }, 5000)
      },  
  }
  mounted(){
      window.addEventListener('mousemove', this.handleMouseMove)
  }
  watch: {
      moveTimeTag: {
        handler (n, o) {
          if (n === false) {
            console.log('鼠标静止了...')
          } else {
            console.log('鼠标正在移动...')
          }
        },
        immediate: true
      }
  },