本文写于 2020 年 6 月 1 日 今天看到了两个函数,防抖函数与节流函数。 这俩函数名字看起来是不是十分高端? 但是对于前端而言,这一年多的学习让我明白——不要望文生义,更不要望文生畏! 那么,啥是防抖?啥是节流?防抖函数请先思考两个故事。 故事一: 首先想象我们回到了 25 年前,我们的网速还是在 18kb/s 。 这个时候我们访问了现代的淘宝,准备备战 618。 但是很不幸,因为网速过慢,我们在购买的时候迟迟没有反应,所以我们一次又一次的点击“立即购买”。 假设这个淘宝是平行空间的淘宝,他们没有做任何防止重复提交的技术。 那么我们的多次点击,将会把所有的请求全部上传!恭喜你,购买了 N 件同样的商品。 故事二: 如果我们有 10 部电梯和 10 个用户,这些用户会以 5 秒钟的间隔依次进入电梯。并且用户一旦进入电梯,电梯门就会关闭,不可停止。 那这个时候,10 个用户,就会乘着 10 个电梯,顺着相差 5 秒的电梯一起上行。 这也太浪费资源了! 所谓防抖函数,就是当我们连续的调用 为啥要这么做呢?想想购买按钮和电梯故事,如果不使用防抖,这该是多么的浪费资源呀! 仅仅在短时间内,我们完全是可以按住“上行”按钮停住电梯门的!这样我们所有的人就能一起上行。 这就是防抖。 防抖函数具体到底有哪些用途呢? · 给按钮加函数防抖防止表单多次提交; 节流节流规定一个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。 当我们在编写网页的时候,如果我们需要实现 DOM 拖拽功能,一般都会给 但是真正运行的时候我们会发现:每当元素稍微移动一点,就会触发了大量的回调函数,导致浏览器直接卡死。 除了 DOM 另外一个例子就是电影。 我们知道当 1 秒内连续播放 24 张以上的图片时,人的眼中这些图片就会形成一个连贯的动画。 所以在电影的播放中基本是以每秒 24 张的速度播放的,为什么不 500 张或更多是因为 24 张就可以满足人类视觉需求的时候,500 张就会显得很浪费资源。 对于函数节流,有如下几个场景: · 游戏中的刷新率; 上代码: function debounce(fn, wait) { let timer = null return function() { if (timer) { clearTimeout(timer) timer = null } timer = setTimeout(() => fn(...arguments), wait) } } function throttle(fn, gapTime) { let lastTime = null; return function () { let nowTime = + new Date() if (!lastTime || nowTime - lastTime > gapTime) { fn(...arguments); lastTime = nowTime } } } 这里我们可以看到,其实是 return 的用来操作 如果不理解,可以不要外层的函数,直接将 timer 和 总结一言以蔽之:函数防抖和函数节流,是在时间轴上控制函数的执行次数所用的函数。 (完) |
|