js防抖节流

防抖

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，自己的理解就是不停的触发事件是不会执行函数的，触发结束一段时间后才会执行，场景可以应用在比如input输入，如果不停的输入就不会触发，停止才会触发。

//防抖
function debounce(fn,wait=1000){
  let timer
  return function(...args){
    if(timer)clearTimeout(timer)
    timer = setTimeout(() => {
      fn(this,args)
    }, wait);
  }
}

//立即执行的版本
function debounce(func,wait=1000) {
    let timeout;
    return function (...args) {
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)
        if (callNow) func.apply(this, args)
    }
}

节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数，大概意思有点像技能冷却，一直不停的点击技能，但是只会在技能冷却好的时候触发，场景可以是mousemove，滚动等事件处理。

//节流函数
function throttle(fn,time=1000) {
  let prev = new Date()
  return function(...args){
    let now = new Date()
    if(now-prev>time){
      fn.apply(this,args)
      prev = now
    }
  }
}

function a(){
  console.log('hahahhaha')
}

//测试
setInterval(
  throttle(a)
, 500);