防抖节流

防抖

function debounce(fn,wait,immediately) {
  let timer = null
  return function() {
    let context = this;
    let args = arguments;
    
    if(immediately) {
      if(!timer) {
        fn.apply(context, args)
      }else {
        timer && clearTimeout(timer)
      }
      timer = setTimeout(() => {
        timer = null
      }, wait)
    }else {
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(context, args)
      }, wait)
    }
  }
}

防抖

function trottle(fn, wait, immediately) {
  let last = 0
  return function() {
    let context = this;
    let args = arguments
    let now = Date.now()
    if(now - last > wait) {
      if(immediately) {
        fn.apply(context, args)
      }else {
        let timer = setTimeout(() => {
          fn.apply(context, args)
          clearTimeout(timer)
        }, wait)
      }
      last = now
    }
  }
}

调用

let btn = document.createElement('button');
btn.innerHTML = 'dianwo'
btn.style.padding = '20px'
btn.style.color = '#fff000'
btn.onclick = trottle(btnclick, 2000, false)
function btnclick(ent) {
  console.log('点击参数',ent, this)
  this.style.color = '#ff0000'
}
document.body.appendChild(btn)