节流与防抖

防抖: 一定时间后执行一次,一定时间内再次触发重新计时

1. 定时器非立即执行版

   const debounce = (func, delay) => {
       let timer
       return function (...args) {
           if (timer) clearTimeout(timer)
           timer = setTimeout(() => {
               func.apply(this, args)
               clearTimeout(timer)
           }, delay)
       }
   } 

2. 定时器立即执行版(指定在延迟结束后调用, 但是首次会执行两次)

   const debounce = (fn, delay = 500, immediate = true) => {
       let timer
       return function () {
           let args = arguments
           let that = this
           timer && clearTimeout(timer)
   
           if (immediate) {
               fn.apply(that, args)
               immediate = false
           }
           timer = setTimeout(function(){
               fn.apply(that,args)
   　　         immedoate = true
               clearTimeout(timer)
           },delay)
       }
   }
   

   　　

3.  定时器立即执行版(指定在延迟结束前调用) => 推荐使用

   const debounce = (fn, delay, immediate = true) => {
     let timer = null
     return function () {
       let that = this
       let args = arguments
       timer && clearTimeout(timer)
       if (immediate && !timer) {
         fn.apply(that, args)
       }
       timer = setTimeout(() => { timer = null }, delay)
     }
   

   　　

节流: 一定时间内均匀执行,相同频率执行(推荐时间戳)

1. 定时器版

   const _throttle = (fn, delay) => {
     let timer = null
     return function () {
       let _this = this
       let args = arguments
       if (!timer) {
         timer = setTimeout(() => {
           fn.apply(_this, args)
           timer = null
         }, delay)
       }
     }
   }

2. 时间戳版

   const throttle = (fn, delay = 1000) => {
       let preventTime
       return function () {
           let args = arguments
           let that = this
           let nowTime = Date.now()
           if (!preventTime) {
               preventTime = nowTime
           }
           if (nowTime - preventTime > delay) {
               preventTime = nowTime
               fn.apply(that, args)
               return
           }
       }
   }