前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 )

前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 )

场景

​ 函数防抖分为立即执行和非立即执行，立即执行是指开始立即执行一次，之后在指定时间后再执行才可以执行；非立即执行是指 执行过程中不执行，执行后过一段时间再执行

​ 函数节流是指根据间隔时间执行

​ 下面是其简易实现

防抖

// 非立即执行版
function debounce(fn,time) {
  let timer = null
  return function() {
    clearTimeout(timer)
    timer = null
    timer = setTimeout(() => {
      fn.apply(null)
    },time)
  }
}

// 立即执行版
function debounce2(fn,time) {
  let timer = null 
  return function() {
    if(timer) {
      clearTimeout(timer)
    }
    if(!timer) {
      fn.apply(null)
    }
    timer = setTimeout(() => {
      timer = null
    },time)
  }
}

// 利用setTimeout的特性+闭包来实现

// 调用
window.addEventListener('scroll',debounce(function() {
      console.log(1)
    },50))
    window.addEventListener('scroll',debounce2(function() {
      console.log(2)
    },1000))

节流

// 利用setTimeout 方法
function throttle(fn,time) {
  let timer = null
  return function() {
    if(!timer) {
      timer = setTimeout(() => {
        fn.apply(null)
        timer = null
      },time)
    }
  }
}

// 利用Date.now() 方法
function throttle2(fn,time) {
  let preTime = 0
  return function() {
    // 不加入该判断会立即执行一次
    if(!preTime) {
      preTime = Date.now()
      return 
    }
    if(Date.now() - preTime > 1000) {
      fn.apply(null)
      preTime = Date.now()
    }
  }
}

小结

​ 重新看了下这些方法，逻辑比之前理解的块，多看多记有很大帮助～