今天简单聊聊JavaScript的函数防抖和节流,因为今天遇到别人问我这个问题,函数的防抖和节流有啥区别,应用场景又是什么?
那接着我们就带着这两个问题来讨论一下吧。不过网上应该也有很多资料。单纯跟大家互相讨论下,说的不对的地方,感谢指出,便于改进。
函数防抖 debounce
原理:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间(这个是摘抄过来的,用我的话来说,就是在n秒内不停触发这个函数,只会执行最后一次)
那原理聊完了,我们就上代码吧,简单直接点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 函数防抖</title> </head> <body> <input type="text" name="" id="inp" value="" /><br> </body> <script> (function(){ if(false) return; console.log(1122) })() // 函数防抖 两个参数,一个防抖的函数,一个是time时间毫秒,多少秒内触发这个会进行防抖处理 function debounce(fn,time) { var timer = null; return function() { clearTimeout(timer) timer = setTimeout(()=>{ fn.apply(this,arguments) },time) } } function sayHi() { console.log(this.value) console.log('防抖处理') } var inp = document.getElementById('inp'); inp.addEventListener('input', debounce(sayHi,1000)); // 防抖 </script> </html>
不了解的,可以直接复制到出来运行下,那说完原理,复制完代码,就说说应用场景吧,这东西应该就面试官喜欢问,实际工作看情况
函数防抖应用场景:通过input实时搜索,用户注册时候的手机号码验证和邮箱验证,还有页面滚动回调等等这些场景都挺适用,一切从实际出发,不要让自己思维限死了,根据实际场景运用,主要明白这个东西原理用来干嘛的
函数节流 throttle
原理: 高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率(摘抄的,用我的话说,就是n秒内不停触发这个函数,只执行一次)说的有问题的话,请指出改进
上代码吧,不多说
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数节流</title> <style> .p1{ height: 5000px; } </style> </head> <body> <button type="button" id="btn">获取button的信息触发节流</button> <p class="p1">信息</p> </body> <script> // 函数节流 function throttle(fn,time) { var canRun = true; return function() { if(!canRun) return; canRun = false setTimeout(()=>{ fn.apply(this,arguments) canRun = true },time) } } function getButtonSize(e) { console.log('getButtonSize',e.target) } var btn = document.getElementById("btn") btn.addEventListener('click',throttle(getButtonSize,1000)) // 网页滚动监听 function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置:' + scrollTop); } window.onscroll = throttle(showTop,500) </script> </html>
函数节流应用场景: 上面有两个,一个是按钮多次触发获取按钮信息,一个是监听网页滚动位置,实时监听太过耗费性能所以可以通过节流处理,还有比如点击支付等等,根据实际场景运用,主要还是明白这个东西用来干嘛的
大家如果有问题的话可以留言,也可以跟我这个小菜鸟交流。为啥要写这么简单的东西,因为最近不用996,闲得慌吧。本来想继续写vue3的,但是不知道怎么写下去,感觉看着vue官方文档也可以使用,vue3源码又没研究。