前言
函数防抖和函数节流是在前端性能优化中老生常谈的话题，也是各位前端的童鞋必须要掌握的性能优化手段。今天为大家分享函数防抖和函数节流的相关原理以及具体实践场景，希望能够给各位小伙伴在工作中提供相应业务场景的解决方案。
一、函数防抖
概念：
如在窗口resize、input输入、textarea输入等操作时，为避免性能浪费，额外无意义执行相关函数处理，需检测用户是否已操作完毕。
规则：
- 未完成操作时不执行相关函数处理
- 用户完成操作后，执行相关函数处理
案例：百度搜索推荐-根据用户的输入推荐相关搜索建议
一般思路：
监听input的input事件，用户输入数据即立刻执行查询查询
<body>
<input type="text" id="searchInput">
</body>
<script>
let searchInput = document.querySelector('#searchInput')
searchInput.oninput = function () {
// 获取搜索值后，执行搜索推荐请求
console.log(this.value)
}
</script>
缺点：
如果用户是想搜索abc，在输入时相当于执行了3次搜索（a/ab/abc三次），最终得到结果，那么前两次的请求相当于浪费了...
性能优化方案：
判断用户是否已经输入完毕，输入完毕后执行搜索推荐。那如何判断用户是否已经输入完毕，约定如果用户在1000ms无新输入时，则视为输入完毕。
let searchInput = document.querySelector('#searchInput')
let searchTimer
searchInput.oninput = function () {
// 如果在用户输入的范围内已经存在一个定时器，就将此定时器关闭，启动新定时器
if (searchTimer) {
clearTimeout(searchTimer)
}
// 启动定时器
searchTimer = setTimeout(() => {
console.log(this.value)
}, 1000)
}
此时，用户再连续输入abc时，只会执行一次查询，完美~
二、函数节流
概念：
我们在移动端开发时经常会遇到页面触底加载更多数据，射击类游戏中子弹固定间隔发射的需求，这需要我们去判断是否已经触底，是否已经可以发射子弹了。为避免频繁性的执行判断操作，引入函数节流，在固定的周期内执行一次逻辑判断，减少无意义的多次判断，同时不影响用户体验。
规则
- 在约定周期内，虽触发多次，只执行1次判断操作
- 周期内的逻辑判断标志如果存在，则执行停止程序的执行
案例：页面滚动时，判断是否已触底，进行加载更多数据操作
一般思路：
监听页面的scroll滚动事件，判断是否已经触底 规则：文档高度 -滚动条 <= 50 表示已经触底。
window.onscroll = function () {
let dH = document.documentElement.scrollHeight
let sH = document.documentElement.scrollTop
let offsetHeight = dH - sH
console.log(offsetHeight)
if (offsetHeight <= 50) {
console.log('已经触底，可触发请求更多数据')
}
}
缺点：
页面在滚动时，非常短的时间内会触发很多次滚动，每次都检测是否已经触达底部是一种非常浪费的行为
性能优化方案：
一定的周期内 - 300ms，用户多次滚动只进行一次判定，同时并不影响用户的体验。
let scrollTimer
window.onscroll = function () {
if (scrollTimer) {
return
}
scrollTimer = setTimeout(() => {
let dH = document.documentElement.scrollHeight
let sH = document.documentElement.scrollTop
let offsetHeight = dH - sH
console.log(offsetHeight)
if (offsetHeight <= 50) {
console.log('已经触底，可触发请求更多数据')
}
scrollTimer = null
}, 300);
}
此时在300ms内，执行一次逻辑判断，大量减少了无意义的多次逻辑判断，提升了页面性能，同时未影响用户体验。
本文暂时没有评论，来添加一个吧(●'◡'●)