防抖函数

不需要传参

js

function debounce(fn, delay) {
  let timer = null
  return function() {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.call(this)
    }, delay)
  }
}
const btn = document.querySelector('button')
btn.addEventListener('click', debounce(function() {
  console.log(this); // button
}, 1000))

function debounce(fn, delay) {
  let timer = null
  return function() {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.call(this)
    }, delay)
  }
}
const btn = document.querySelector('button')
btn.addEventListener('click', debounce(function() {
  console.log(this); // button
}, 1000))

需要传参

js

function debounce(fn, delay) {
  let timer = null
  return function() {
    let args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
const btn = document.querySelector('button')
btn.addEventListener('click', debounce((a, b) => {
  console.log(a, b); // 1, 2
}, 1000).bind(btn, '1', '2'))

function debounce(fn, delay) {
  let timer = null
  return function() {
    let args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
const btn = document.querySelector('button')
btn.addEventListener('click', debounce((a, b) => {
  console.log(a, b); // 1, 2
}, 1000).bind(btn, '1', '2'))