JS总结：（一）函数节流

本篇思考三个问题：什么是函数节流？为什么要使用函数节流？如何实现？

一、基本思想：某些代码不可以在没有间断的情况连续重复执行。

二、使用原因：DOM操作比起非DOM交互，需要更多的内存和CPU时间，连续尝试过多的DOM操作可能会导致浏览器挂起，甚至崩溃。

三、实现方式：使用定时器对函数进行节流，即第一次调用函数，创建一个定时器，在指定的时间间隔后运行代码。当第二次调用该函数的时候，它会清除前一次的定时器并设置另外一个。

（如果前一个定时器已经执行过，这个操作就没有任何意义。然而如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。）

四、代码实现：

　　由于节流在resize中是最常用的，如果基于该事件来改变页面布局的话，最好控制处理频率，以确保浏览器不会在极短的时间内进行过多次的计算。

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)
}

五、应用场景

　　只要代码是周期执行的，都应该节流。鼠标的mousemove、scroll，浏览器窗口的resize事件等。