函数节流

基本思想：某些代码不能在没有时间间隔的情况下连续触发。第一次调用函数，会创建一个定时器，在指定的时间间隔之后执行。当第二次调用代码时，会先清除第一次的计时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。下面通过代码来看一下这种形式：

var processor = {
    timer = null;
    processing: function(){
        //实际执行的代码
    },
    process: function(){
        clearTimeout(this.timer);
        var that = this;
        this.setTimeout(function(){
            that.processing();
            )},100);
    }
}
processor.process();

这段代码中当执行process()时，先清除存好的timer，来阻止之前的调用被执行。然后创建一个新的定时器来执行processing()，也就是真正要运行的代码。由于在setTimeout()中用到的函数的环境总是window，所以必须提前将this保存起来。
这种形式我们可以使用下面的这个函数对它进行简化。

function throttle(method,context){
    clearTimeout(method.timer);
    method.timer = setTimeout(function(){
        method.call(context);
        },100);
}

这个函数接收两个参数，分别表示需要执行的代码和执行上下文。当没有传入第二个参数时，就会在全局作用域内执行该方法。
我们都知道，节流在resize事件中是最常用到的。下面我们来看一个例子，假设有一个div元素，我们要求它的高度始终和它的宽度保持一致。我们就可以通过下面这段代码来实现：

window.onresize = function(){
    throttle(resizeDiv);
};
function resizeDiv(){
    var div = document.getElementById('box');
    div.style.height = div.offsetWidth + 'px';
}