window 的 resize、scroll
mousedown、mousemove
keyup、keydown
……
防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!
节流的原理：
如果你持续触发事件，每隔一段时间，只执行一次事件。
根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。
我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。
关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。
具体参考文章：
https://github.com/mqyqingfeng/Blog/issues/22
https://github.com/mqyqingfeng/Blog/issues/26
debounce是指当函数被触发时，如果没有到我们设定的时间，函数不会执行，如果在设定时间之前多次触发，那么计时器会被重设，直到最后一次触发后过了设定的时间，函数才会真正执行。
一般的应用场景是：input组件根据用户输入去做一些请求，比如联想词这种需求，这个时候我们尽量不要每当input的change事件触发就去请求，我们可以等用户停止输入后比如100ms再去请求。
具体场景其实可以根据这个函数的实际功能然后结合业务需求去考虑是否使用。
我们来看看如何实现：
这样，一个基础版的防抖函数就写好了。
然后我们再来优化一下，实际使用中，我们可能需要让它第一次立即执行，然后后面延迟执行，这个需要怎么实现呢，我们来看一下：
实际的比如lodash.debounce会实现的比这个复杂一些，因为要考虑到很多种情况，但是基本的思想都在这里了。
function debounce(func, delay) {let timer
//当前的this是指向window
return function (...args) {
//当前的this是指向dom元素
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() =>{
func.apply(this, args)
}, delay)
}
}
例：<div id="test">点击</div>
实现隔3s执行一次的操作：
document.getElementById('test').addEventListener('click', debounce(function() {
console.log('执行完成之后的动作')
}, 3000))
记：事件回调函数里的this指向触发当前事件的DOM元素
