简单的了解下闭包的应用

1.不会污染全局作用域

var a = (function () {
    // 这样声明为模块私有变量，外界无法直接访问
    var foo = 0;

    function b() {
        console.log(foo);
    }
    return b;
}());

2. 在循环中创建闭包，防止取到意外的值。

// 如下代码，无论哪个元素触发事件，都会弹出 3。因为函数执行后引用的 i 是同一个，而 i 在循环结束后就是 3

for (var i = 0; i < 3; i++) {
    document.getElementById('id' + i).onfocus = function() {
      alert(i);
    };
}
//可用闭包解决
function makeCallback(num) {
  return function() {
    alert(num);
  };
}
for (var i = 0; i < 3; i++) {
    document.getElementById('id' + i).onfocus = makeCallback(i);
}

3.防抖

搜索框联想记忆，只发送最后一次输入

var timer; // 定时器
function change (e) {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function () {
        console.log(e.target.value);
        timer = fn();
    }, 1000)
}
document.querySelector("#test").addEventListener('keyup', change);

4.节流

窗口大小变化，拖拽事件，一段时间只执行一次

var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));