前端面试：闭包，以及节流和防抖

闭包

闭包用于解决，外部函数访问不到内部函数的变量，借助内部函数可以访问到外部函数的变量的特性。就是函数嵌套函数，如下。

代码解释：

function outerFun() {let a = 10;function innerFun() {console.log(a);}return innerFun;
}
let res = outerFun();
res();

输出：10。

这就是函数嵌套函数，内部函数是闭包。内部函数的变量可以访问外部函数的变量a，所以可以输出10。

正常情况下，函数执行完毕，内存变量会销毁，也就是释放内存空间，那么就不会把输出结果10，而是输出undefined或者报错

那为什么上面还会输出结果呢？

因为闭包函数就是建立在函数内部的，内部函数没有执行完成，在上面的代码中，内部函数innerFun作为返回值被赋值给了res，内部函数innerFun并没有执行完成，外部函数变量就不会被销毁，它可以访问到外层函数的变量，所以就会导致外层函数执行完毕时，它的作用域不会被销毁。直到闭包函数也不存在。

闭包代码片段

每次外部函数执行的时候，都会开辟一块内存空间，外部函数的地址不同，都会重新创建一个新的地址：

function outerFn(){var i = 0; function innerFn(){i++;console.log(i);}return innerFn;
}
var inner = outerFn();  //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同，都会重新创建一个新的地址
inner();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2();

依次输出：1 2 3 1 2 3

var i = 0;
function outerFn(){function innnerFn(){i++;console.log(i);}return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();
inner1();
inner2();  //1 2 3 4 5 6

依次输出：1 2 3 4 5 6

闭包经典面试题

for (var i = 0; i < 5; i++) {setTimeout(function () {console.log(i++);}, 1000)
}
console.log(i);

先输出5，1秒后依次输出5，6，7，8，9。

function fnnn(){var arr = [];for(var i = 0;i < 5;i ++){arr[i] = function(){return i;}}return arr;
}
var list = fnnn();
for(var i = 0,len = list.length;i < len ; i ++){console.log(list[i]());
}

输出五个5。

防抖和节流就是两个典型的闭包案例

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

防抖是，当在一秒内快速多次点击按钮时，只执行最后一次点击的请求，有效的减少发送请求的次数。

如，在input输入框里快速输入时，取输入完成的结果发送请求，而不是从第一个字符就开始发送，这就是 “只执行最后一次点击的请求” 的意思。

<body><input type="text"><script>let input = document.querySelector('input')function fun1() {console.log('点击了！！！');}input.addEventListener('keyup', debounce(fun1, 1000))function debounce(fn, delay) {let timer = null;return function () {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fun1()}, delay)}}</script>
</body>

节流是，控制事件执行次数，保证一定时间段内只调用一次事件处理函数。

如，滚动事件，少则一秒内发生几百次触发，非常消耗性能，利用闭包和定时器，可以保证执行次数。

函数执行的前提条件是，持续触发时，持续关闭开关，等到setTimeout到时间了，再把开关打开，函数就会执行了。

<style>body {height: 2000px;}
</style>window.onscroll = throttle(function () {console.log('滚动啦！');
}, 1000)function throttle(fn, delay) {let valid = true;return function () {if (valid) {setTimeout(() => {// fn()func.apply(this, arguments)valid = true}, 1000)}}valid = false;
}

闭包代码理解参考：
闭包，看这一篇就够了——带你看透闭包的本质，百发百中