前端优化：防抖(debounce) _ 节流(throttle)

vue 使用

防抖(debounce)

防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove)、输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖

//创建debounce.js

  // 防抖
  const debounce=function(fn, delay){
    let timer = null
    return function(){
      let content = this;
      let args = arguments;
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(()=>{
        fn.apply(content,args)
      }, delay)
    }
  }
  export default debounce

节流(throttle)

节流就是短时间内会多次触发相同的事件,而我们的目的却只是想让他们既定时间内只触发一次,例如滚轮事件(scroll)、鼠标点击事件(click)等等,这个时候我们就需要一个方法去控制他,一段时间(0.5S/1S)之内只能触发一次事件,即为节流

//创建throttle.js

  // 节流
  export default function throttle(fn, time) {
    let timer = null
    time = time || 1000