因为它，我差点删库跑路：js防抖与节流
- 2021 年 7 月 14 日
- 笔记
前言
前端踩雷：短时间内重复提交导致数据重复。
对于前端大佬来说，防抖和节流的技术应用都是基本操作。对于“兼职”前端开发的来说，这些都是需要躺平的坑。
我们今天就来盘一盘js防抖与节流，并且解决开发中遇到的问题。
PS：重复提交问题我用的是防抖的方法进行避免。
防抖的概念
防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
前端开发中，常见的事件如，onresize，scroll，mousemove ,mousehover 等会短时间内多次触发（频繁触发），不做限制的话可能一秒执行几百次，
在这些函数内部如果还执行了其他函数，尤其是执行了操作 DOM 的函数的话（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，
还会降低程序运行速度，甚至造成浏览器卡死、崩溃。
除此之外，短时间内重复调用 ajax 不仅会造成数据关系的混乱，还会造成网络拥堵，增加服务器压力等问题。
防抖代码实现
防抖的关键是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。
如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。
若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。
注意：当你一直连续不断的点击超过你设置的时间，并且只有第一次点击有效，这不是bug，这是概念问题，注意看下面标红这部分，
防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js防抖与节流</title> </head> <body> <!--按钮--> <button id="btn">点击提交</button> <script type="text/javascript"> var num = 1; const seckill = () => { console.log('我是防抖，你点击了按钮' + num++) } // 防抖函数 const debounce = (fun, wait) => { let timeout; return function () { if (timeout) { clearTimeout(timeout); } //第一次执行任务，timeout是null，此时callNow是true，需要立即执行 let callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait); if (callNow) { fun.apply(this); } } }; //点击提交按钮 let btn = document.getElementById('btn'); //调用方法（ 1s内只允许一次操作） btn.addEventListener('click', debounce(seckill, 1000)); </script> </body> </html>
节流的概念
节流又叫函数节流（throttle）：指当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
节流代码实现
- 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
- 在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
- 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
节流和防抖都是差不多的，区别在于是“立即执行版” 和 “非立即执行版”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js防抖与节流</title> </head> <body> <!--按钮--> <button id="btn">点击提交</button> <script type="text/javascript"> var num = 1; const seckill = () => { console.log('点击了按钮' + num++) } function throttle(callback, delay) { var timer, begin = new Date(); return function () { //记录事件触发时的时间 var current = new Date(); //清除上一次定时器任务 clearTimeout(timer); //判断距上一次触发是否已过了delay的时间 if (current - begin >= delay) { callback(); begin = current; } else { timer = setTimeout(() => { callback(); }, delay); } } } //点击提交按钮 let btn = document.getElementById('btn'); //调用方法（ 1s内只允许一次操作） btn.addEventListener('click', throttle(seckill, 1000)); </script> </body> </html>
防抖和节流的区别
函数防抖：是n秒内只执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
函数节流：是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
原理：
防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
总结
函数防抖和节流的实现很简单，能很友好的解决前端开发过程中的遇到的很多问题，提升性能，优化用户体验。
在实际的开发中，防抖函数还是节流函数的选择需要开发者针对不同的应用场景进行相应的应用。
|
欢迎关注订阅微信公众号【熊泽有话说】，更多好玩易学知识等你来取
作者：熊泽-学习中的苦与乐 公众号：熊泽有话说 出处：//www.cnblogs.com/xiongze520/p/15011323.html 创作不易，任何人或团体、机构全部转载或者部分转载、摘录，请在文章明显位置注明作者和原文链接。
|
