函数防抖节流

函数防抖

函数防抖: 间隔时间内，多次触发事件以最后一次触发结果为准。

思路: (1)声明一个变量存储定时器id;

(2)每一次触发事件的时候开启定时器，间隔时间之后触发;

(3)在间隔时间内，用户触发了其他事件，则结束上一次触发事件，以最后一次触发事件为准；

// 声明变量存储定时器id

function debonuce(fn, delay) {
  const timeId = null //声明变量存储定时器id
  return function() {
    const context = this
    if(timeId){
    // 每次触发事件的时候，清除上一次的定时器，以最后一次触发为准
      window.clearTimeout(timeId)
    }
    // 防抖每次触发事件的时候，先不触发，开启定时器，间隔时间之后触发
    timeId = setTimeout(()=>{
      fn.apply(context, arguments)
      timeId = null 
    },delay)
  }
}
const debounced = debounce(()=>console.log('hi'))
debounced()

函数节流

函数节流: 隔时间内函数只触发一次(技能cd)

思路:(1)声明变量存储本次触发的时间time

(2)每次触发的时候，使用当前时间 - time,并判断两次间隔时间是否超过节流时间

超过:触发，并存储本次触发的时间

不超过:不触发

作用：降低高频事件触发的频率

// 声明变量存储本次触发时间
let time = null

let i = 1  
// 高频率事件：鼠标移动次数
window.onmousemove = function(){
// 声明当前时间，并判断两次间隔时间
  let currentTime = Data.now()
  if(currentTime - time >= 300){
       i++
       console.log('鼠标移动次数' + i )
       time = currentTime  //存储本次触发时间
  }
}