函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案，但是经常傻傻分不清楚。本章内容对两者区别展开描述：
首先思考三个问题：
1. 函数节流和函数防抖是什么东东？
2. 为什么要使用函数节流和函数防抖？
3. 如何实现函数节流和函数防抖？
基本思想：某些代码不可以在没有间断的情况连续重复执行。
使用原因：DOM操作比起非DOM交互，需要更多的内存和CPU时间，连续尝试过多的DOM操作可能会导致浏览器挂起，甚至崩溃。
应用场景：只要代码是周期执行的，都应该节流。鼠标移动mousemove事件、滚动条滚动scroll事件，浏览器窗口改变resize事件等。
生活中物体对两者形象的描述：
函数节流（throttle）：一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。
函数防抖（debounce）：将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。
两者比较：
由于节流在resize中是最常用的，所以我们基于该事件来改变页面布局进行两者的比较。
window.onresize = function() {
var div = document.getElementById('mydiv')
div.style.height = div.offsetWidth + 'px'
console.log('resize')
}
不停的改变窗口大小，观察打印结果。。。。
很明显，用户如果不断放大缩小浏览器窗口，那我们监听函数将会不停的被调用，倘若函数过“重”，即假设如上文描述的一般，那么对浏览器的压力将会非常之大，其高频率的更改可能会让浏览器崩溃。
函数防抖（debounce）将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次！
如下函数防抖的思想，不论用户如何放大缩小，在他结束的的那一刻才进行我们的方法调用即可
function debounce(fn) {
var timer var _self = fn return function() {
clearTimeout(timer)；
var args = arguments； // fn所需要的参数
var _me = this； // 当前的this
timer = setTimeout(function() {
_self.call(_me, args)
}, 200)；
}
}
function resizeDiv() {
var div = document.getElementById('mydiv')；
div.style.height = div.offsetWidth + 'px'；
console.log('resize')；
}
window.onresize = debounce(resizeDiv)；
触发事件，查看和之间的比较，确实解决了那个问题，但是，
放手之后这里才变化，显得有点突兀，那么能不能在我拖动的时候不能也让它变化同步呢？？？
函数节流（throttle）当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率；
函数节流（throttle）可以优化用户体验，如我们需要用户在 resize 浏览器窗口的过程中，height 与 width 也能保持一致，时刻触发函数（函数防抖（debounce）肯定是不可以的，所以需要优化频率。
控制好处理频率，可以确保浏览器不会在极短的时间内进行过多次的计算。
函数节流代码如下:
function resizeDiv(){
var div = document.getElementById('myDiv')
div.style.height = div.offsetWidth + "px";
}
function throttle(method){
clearTimeout(method.tid);
method.tid = setTimeout(x=>{
method.call();
},100)
}
window.onresize = function(){
throttle(resizeDiv)
}