手写节流防抖

节流「技能冷却中」

一般用于用户频繁点击按钮的操作。

const x = () => {
  console.log('闪现')
}

let toggle = false
let timer = null
function sx () {
  if(toggle === true) return
  x()
  toggle = true
  setTimeout(()=>{
    toggle = false
  },6000)
}

节流——可以理解为闪现CD未好。

function throttle(fn, time) {
  let toggle = false
  return (...args) => {
    if(toggle) return
    toggle = true
    fn.call(undefined,...args)
    setTimeout(()=> {
      toggle = false
    }, time)
  }
}

function throttle(fn, time) {
  let timer = null
  return (...args) => {
    if(timer) return
    fn.call(undefined,...args)
    timer = setTimeout(()=> {
      timer = null
    },time)
  }
}

使用方法：

const f = throttle((name)=> console.log("My name is " + name),3000)
f('baizhe') // 打印
f('baizhe') // 冷却

防抖「回城被打断」

一般用于用户频繁的拖动操作，希望用户拖动结束后在进行操作。

防抖——可以理解为打断回城动作。

const x = () => {
  console.log('回城')
}
let timer = null
function tp() {
  if(timer !== null) {
    clearTimeout(timer)
  }
  setTimeout(()=> x(),3000)
}

function debounce(fn, time) {
	let timer = null
  return (...args) => {
    if(timer !== null) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=> {
      fn.call(undefined,...args)
      timer = null
    },time)
  }
}