节流与防抖这两个词汇在面试的过程当中出现的频率是非常之高的！首先你要知道节流与防抖它并不是一门什么新的技术，而是为解决某些问题所采取的一种程序手段而已。再说直白一些其所指的就是代码优化！那么它们要解决的问题是什么？用于解决用户频繁触发事件执行，而对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>
作者：张培跃
链接：https://www.jianshu.com/p/6ef7fac4ae0f
共同学习，写下你的评论
评论加载中...
作者其他优质文章
