web前端常见面试题解析之函数节流与防抖（一）

节流与防抖这两个词汇在面试的过程当中出现的频率是非常之高的！首先你要知道节流与防抖它并不是一门什么新的技术，而是为解决某些问题所采取的一种程序手段而已。再说直白一些其所指的就是代码优化！那么它们要解决的问题是什么？用于解决用户频繁触发事件执行，而对DOM操作、资源加载等耗费性能的问题。该问题可能会导致界面卡顿，甚至浏览器崩溃，从而降低你的用户体验！

我们先来聊一聊函数节流究竟是个什么鬼？先来看下定义：

• 函数节流指的是预定一个函数，只有函数在大于等于执行周期时才执行，周期内调用不执行。

我们可以将这个定义进行一下拆分：
1、所谓函数节流指的就是一个函数。
2、该函数的执行需要一个周期进行控制。
3、周期内调用该函数不执行，否则会执行。

拆分完之后你会发现，要想理解函数节流的重点便是周期二字。

周期即时间，在指定的时间内不会执行，超过了便执行。就拿生孩子来讲，需要十月怀胎，总不会一个月就生个宝宝出来吧！即使你能创造人类生育史的奇迹，一个月生个健康的宝宝，可一个月也是一个周期对吧！如果到现在你还感觉不太好理解，那么咱们来完成一个小例子，每点击一次按钮数字加1，如图：

    
0
    
    

上面的代码很简单，它告诉我们，只要你速度够快，点击多少次事件便会执行多少次！你发疯的点击，数字便会发疯的增长！虽然你点的很爽，但是代码这样写是有问题的！如果你的DOM渲染比较复杂的话定会造成性能的浪费，另外如果有人恶意攻击的话，后果也是比较严重的，比如我可以在控制台写以下代码：

你会发现数字变了，这肯定不是你想看到的！但这就是现实！如果你做的是商品抢购活动的话，是不是瞬间就木有啦？
还好我比较仁慈，写的循环次数比较小（如果你再往后面加上几个9的话，你的浏览器结果只有死路一条！不妨亲爱的你可以试试看！），如果脚本多执行几次呢？
现在走到这一步，程序便需要优化了。聪明的你可能会想：如果我给他加上一些时间的限制，让其在指定的时间内不允许触发事件，一切不都迎刃而解了吗？没错，这就是函数节流的核心思想！
js代码优化如下：

程序运行，一切还是那么美好！以上代码用到的throttle函数，便是通过闭包封装的节流函数，其核心就是：让一个函数不要执行得太频繁，减少一些过快的调用来节流。
未完，后面再来聊一聊防抖！
价值400元的前端电子书，总有一本适合你！别客气，赶紧拿走拿走！！