防抖函数与节流函数的区别
防抖函数:单位时间内频繁触发某事件,只会执行最后一次
防抖大概类似于游戏内的回城机制,如果回城被打断则重新等待计算时间
节流函数:单位时间内频繁触发某事件,只会触发一次
节流大概类似于游戏内的普攻机制,单位时间内点击再多次,也只会执行第一次的攻击
(攻速就只有那么快,反复点击也不会取消第一次的攻击而去执行新的攻击)
如何实现防抖函数与节流函数
1.防抖函数
(1)使用lodash库 _.debounce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用防抖实现性能优化</title>
<script src="./lodash.js"></script>
</head>
<body>
<input type="text" placeholder="请输入文本">
<script>
// 利用防抖实现性能优化
//需求: 键盘文字防抖处理
const input = document.querySelector('input')
// _.debounce使用必须先引入lodash.js
//在使用时_.debounce(函数,间隔事件) 第一个参数为执行代码,第二个参数为间隔事件
input.addEventListener('input', _.debounce(function () {
console.log(input.value)
}, 500))
</script>
</body>
</html>
tips:使用之前必须引入lodash.js文件
(2)自己封装一个函数实现防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖函数实现</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入文本">
<script>
// 利用防抖实现性能优化
//需求:键盘文字防抖处理
function debounce(callback,time){
let timeID //定义一个定时器
return function(){
clearTimeout(timeID) //清除定时器
timeID = setTimeout( callback, time); //设置定时器
}
}
const input = document.querySelector('input')
input.addEventListener('input',debounce(function(){
console.log(input.value)
},500))
</script>
</body>
</html>
2.节流函数
(1)使用lodash库 _.throttle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用防抖实现性能优化</title>
<script src="./lodash.js"></script>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 利用节流实现性能优化
//需求: 鼠标在盒子上移动,里面的数字就会变化 + 1
let i = 0
window.addEventListener('mousemove',_.throttle(function(){
document.querySelector('.box').innerHTML = i
i++
},1000))
</script>
</body>
</html>
tips:使用之前必须引入lodash.js文件
(2)自己封装一个函数实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用节流实现性能优化</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box">0</div>
<script>
// 利用节流实现性能优化
//需求: 鼠标在盒子上移动,里面的数字就会变化 + 1
function throttle(callback,time){
let timeID = null
return function(){
if(!timeID){
timeID = setTimeout(function(){
callback()
timeID = null
},time)
}
}
}
const box = document.querySelector('.box')
let i = 0
box.addEventListener('mousemove',throttle(function(){
box.innerHTML = i++
},1000))
</script>
</body>
</html>
防抖函数与节流函数的应用场景
防抖函数应用场景:一般用于输入框的判定,或者是用户频繁的点赞和取消赞,都只让服务器响应最后一次的结果,优化浏览器性能。
节流函数应用场景:当页面滚动时会触发某些dom请求时,这个时候就可以设置节流函数,减少dom的请求的次数,优化浏览器性能。
若有问题,欢迎指正。