函数的节流

应用场景： 连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候会崩溃。

如：

1. IE中使用onresize事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件就会连续触发。在onresize事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会导致浏览器崩溃，为了避免这个问题，可以使用定时器对该函数进行节流。
2. 浏览器页面滚动（scroll）
3. 鼠标移动（mousemove）

节流的基本思想： 某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码，当第二次调用该函数时，会首先清除前一次的定时器并设置一个最新的。如果前一个定时器已经执行了，这个操作就没有任何意义。如果这个操作尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止一段时间之后执行。

代码实现

在用户滚动页面内容的时候，进行操作DOM

html：

    <div style="height:5000px">

        <div id="demo" style="position:fixed;"></div>

    </div>

js

var count = 0, demo = document.getElementById('demo');

function testFn() {
demo.innerHTML += `testFN 被调用了 ` + ++count + `次<br>`;
}
window.onscroll = testFn;

在进行滚动内容的时候，会发现“霸屏”行为，如果testFn内部对DOM操作的行为很多而且很复杂的时候，就容易导致浏览器崩溃。

改进：
apply：确保方法在适当的环境中执行

function  throttle(func, wait) {
    let timer = null;
    return function() {
        let context = this;
        let args = arguments;
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                func.apply(context, args)
            }, wait)
        }

    }
}
window.onscroll = throttle(testFn,1000);

只要代码是周期性执行的，都应该使用节流。