函数节流

// fn 是需要执行的函数
// wait 是时间间隔
/**实现函数节流*/
const throttle = (fn, wait = 50) => {
	// 上一次执行 fn 的时间
	let previous = 0
	// 将 throttle 处理结果当作函数返回
	return function(...args) {
		// 获取当前时间，转换成时间戳，单位毫秒
		let now = +new Date()
		// 将当前时间和上一次执行函数的时间进行对比
		// 大于等待时间就把 previous 设置为当前时间并执行函数 fn
		if (now - previous > wait) {
			previous = now
			fn.apply(this, args)
		}
	}
}
// DEMO
// 执行 throttle 函数返回新函数
const betterFn = throttle(() => console.log('fn 函数执行了'), 1000)
// 每 10 毫秒执行一次 betterFn 函数，但是只有时间差大于 1000 时才会执行 fn
setInterval(betterFn, 500)

函数防抖

//function debounce(fn, wait) {
  var timer = null;
    // 返回函数对debounce作用域形成闭包
  return function () {
      var context = this
      var args = arguments
      if (timer) {
          // 事件被触发，清除timer并重新开始计时
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

var fn = function () {
  console.log('boom')
}

setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次

setInterval(debounce(fn,2000),1000) // 不会触发一次（把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）