函数节流与防抖（一）"/>
web前端常见面试题解析之函数节流与防抖（一）
节流与防抖这两个词汇在面试的过程当中出现的频率是非常之高的！首先你要知道节流与防抖它并不是一门什么新的技术，而是为解决某些问题所采取的一种程序手段而已。再说直白一些其所指的就是代码优化！那么它们要解决的问题是什么？用于解决用户频繁触发事件执行，而对DOM操作、资源加载等耗费性能的问题。该问题可能会导致界面卡顿，甚至浏览器崩溃，从而降低你的用户体验！
我们先来聊一聊函数节流究竟是个什么鬼？先来看下定义：
- 函数节流指的是预定一个函数，只有函数在大于等于执行周期时才执行，周期内调用不执行。
我们可以将这个定义进行一下拆分：
1、所谓函数节流指的就是一个函数。
2、该函数的执行需要一个周期进行控制。
3、周期内调用该函数不执行，否则会执行。
拆分完之后你会发现，要想理解函数节流的重点便是周期二字。
周期即时间，在指定的时间内不会执行，超过了便执行。就拿生孩子来讲，需要十月怀胎，总不会一个月就生个宝宝出来吧！即使你能创造人类生育史的奇迹，一个月生个健康的宝宝，可一个月也是一个周期对吧！如果到现在你还感觉不太好理解，那么咱们来完成一个小例子，每点击一次按钮数字加1，如图：
<body><div>0</div><input type="button" value="点我啊" /><script>var myShow = document.querySelector("div");var myBtn = document.querySelector("input");myBtn.onclick = function (ev) {myShow.innerText = parseInt(myShow.innerText)+1;}</script>
</body>
上面的代码很简单，它告诉我们，只要你速度够快，点击多少次事件便会执行多少次！你发疯的点击，数字便会发疯的增长！虽然你点的很爽，但是代码这样写是有问题的！如果你的DOM渲染比较复杂的话定会造成性能的浪费，另外如果有人恶意攻击的话，后果也是比较严重的，比如我可以在控制台写以下代码：
你会发现数字变了，这肯定不是你想看到的！但这就是现实！如果你做的是商品抢购活动的话，是不是瞬间就木有啦？
还好我比较仁慈，写的循环次数比较小（如果你再往后面加上几个9的话，你的浏览器结果只有死路一条！不妨亲爱的你可以试试看！），如果脚本多执行几次呢？
现在走到这一步，程序便需要优化了。聪明的你可能会想：如果我给他加上一些时间的限制，让其在指定的时间内不允许触发事件，一切不都迎刃而解了吗？没错，这就是函数节流的核心思想！
js代码优化如下：
<script>var myShow = document.querySelector("div");var myBtn = document.querySelector("input");/*定义的节流函数func指定的时间结束后所执行的函数，wait指定的时间返回值为函数*/function throttle(func, wait) {let previous = 0;return function() {let now = Date.now();let context = this;if (now - previous >= wait) {func.apply(context, arguments);// 函数执行后更新 previous 值previous = now; }}}function addOne() {myShow.innerText = parseInt(myShow.innerText)+1;}myBtn.onclick = throttle(addOne,1000);
</script>
程序运行，一切还是那么美好！以上代码用到的throttle函数，便是通过闭包封装的节流函数，其核心就是：让一个函数不要执行得太频繁，减少一些过快的调用来节流。
未完，后面再来聊一聊防抖！
—————END—————
喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容！！！
更多推荐
web前端常见面试题解析之函数节流与防抖（一）
发布评论