方法1:利用lodash库提供的防抖来处理
方法2:手写一个防抖函数来处理
需求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字才会变化+1
方法一:利用lodash库实现防抖
<!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>Document</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<script src="./js/lodash.min.js"></script>
<div class="box"></div>
<script>
// 利用防抖实现性能优化
// 需求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字就会变化+1
const box = document.querySelector('.box')
let i = 1
function mouseMove(){
box.innerHTML = i++
}
// mousemove鼠标移动事件
// 鼠标一移动就500ms后就触发debounce事件,i就++
// _.debounce语法(fun,时间)
box.addEventListener('mousemove', _.debounce(mouseMove,500))
</script>
</body>
</html>
方法二: 手写一个防抖函数来处理
思路:
核心是利用setTimeout定时器来实现
1声明定时器变量
2每次事件触发时都要先判断是否有定时器,如果有先清除以前的定时器
3如果没有定时器则开启定时器存入到定时器变量里面
4定时器里面写函数调用文章来源:https://www.toymoban.com/news/detail-718024.html
<!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>Document</title>
<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>
// 利用防抖实现性能优化
// 需求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字就会变化+1
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
// 手写防抖函数
// 核心是利用setTimeout定时器来实现
// 1声明定时器变量
// 2每次事件触发时都要先判断是否有定时器,如果有先清除以前的定时器
// 3如果没有定时器则开启定时器存入到定时器变量里面
// 4定时器里面写函数调用
function debounce(fn,t){
let timer
//return返回一个匿名函数
return function(){
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
fn() //加小括号调用fn函数
}, t)
}
}
box.addEventListener('mousemove',debounce(mouseMove,500))
// 有括号的函数会直接执行的不用鼠标滑动,所以当鼠标滑动时需要有一个return
</script>
</body>
</html>
文章来源地址https://www.toymoban.com/news/detail-718024.html
到了这里,关于性能优化之防抖的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!