js 防抖(debounce)和节流(throttle)

在前端开发中会遇到一些频繁的事件触发，比如click,，keyup、keydown、scroll, resize,drag等事件加载请求…频繁的触发会导致卡顿。
防抖的原理：防止在有效时间内多次触发

// 获取dom对象
let btn = document.querySelector('#btn')
// 可执行函数
function executeFn() {
	console.info('log')
}
// 给按钮绑定点击事件
btn.addEventListener('click', debounce(executeFn, 2000, true))
// 移除事件监听removeEventListener('drag', fn, false) 当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。
// 防抖函数具体逻辑
function debounce(fn, waitSec, isInstant) {
	let timeout = null
	return function() {
		clearTimeout(timeout)
		if (isInstant) { // 是否立即执行
			fn.apply(this, arguments)
			firstClick = false
		} else { // isInstant === false
			tiemout = setTimeout(() => {
				fn.apply(this, arguments)
			}, waitSec)
		}	
	}
}

节流的原理：用于高频请求事件触发，在n秒内只会执行一次

function throttle(fn, waitSec) {
  let flag = true
  return function () {
    if (!flag) return
    flag = false;
    setTimeout(() => { 
      fn.apply(this, arguments)
      flag = true
    }, waitSec)
  }
}
function executeFn() {
	console.log('let get started!!')
}

let btn = document.querySelector('#btn')
btn.onkeydown = throttle(executeFn, 2000)

也可参考以下博客：
https://blog.csdn.net/smlljet/article/details/96423420
https://segmentfault.com/a/1190000018455906