当前位置：首页 > news >正文

性能优化之防抖

news 2025/8/26 7:03:36

方法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之后，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function mouseMove(){box.innerHTML = i++}// mousemove鼠标移动事件// 鼠标一移动就500ms后就触发debounce事件，i就++// _.debounce语法(fun,时间)box.addEventListener('mousemove', _.debounce(mouseMove,500))</script>
</body>
</html>

方法二：手写一个防抖函数来处理

思路：

核心是利用setTimeout定时器来实现

1声明定时器变量

2每次事件触发时都要先判断是否有定时器，如果有先清除以前的定时器

3如果没有定时器则开启定时器存入到定时器变量里面

4定时器里面写函数调用

<!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之后，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function 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>