方法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定时器里面写函数调用
<!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>
标签：
前端
javascript
本文转载自: https://blog.csdn.net/weixin_52512511/article/details/133240764
版权归原作者 要努力奋斗鸭 所有， 如有侵权，请联系我们删除。
版权归原作者 要努力奋斗鸭 所有， 如有侵权，请联系我们删除。