防抖函数及其应用

建议使用 lodash 插件里面的 debounce 函数来实现

1、防抖函数简单原理

/**
 * 防抖函数
 * 定义：
 *    就是指触发事件后在 n 秒内函数只能执行一次
 *    如果在 n 秒内又触发了事件，则会重新计算函数执行时间
 * @param {需要防抖的函数} fn
 * @param {规定的时间内} delay
 * param1、param2 为额外定制接受的参数
 */
function debounce (fn, delay, param1 = '', param2 = '') {
  /* 获取接收的参数，排除掉前两位固定的参数 */
  const params = [...arguments].splice(2)
  var timer = null
  return function () {
    /* 清除上一次的定时器 */
    clearTimeout(timer)
    /* 重新设置新的演延时器 */
    timer = setTimeout(function () {
      fn.call(this, ...params)
    }, delay)
  }
}

2、防抖函数的应用

/**
 * 某个元素点击要执行的事件
 * 假设要对这个事件进行节流
 */
function task (params = 'params') {
  console.log(1, params);
}

/**
 * 防抖函数的应用
 */
$('.dom').on('click', debounce(task, 1000, 'hehe'))