1、lodash库实现防抖
需求:鼠标在盒子上 移动,里面数字+1
鼠标停止前最后一刻移动即为上一次调用,故鼠标停止后过500ms,调用func
鼠标一直移动的话,则一直调用debounced函数
<!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 src="lodash.min.js"></script>
<!-- 引入lodash文件 文件内容将加载到这里 -->
<script>
const div = document.querySelector('.box')
let i = 1
function mouseMove() {
div.innerHTML = i++
}
// 以前事件监听的第二个参数 函数后面不加小括号 但debounce要加 因为要往里面传递参数
// box.addEventListener('mousemove', mouseMove)
div.addEventListener('mousemove', _.debounce(mouseMove, 500))
</script>
</body>
</html>
2、手写防抖函数
需求:鼠标在盒子上移动,鼠标 停止 500ms后,数字才+1
鼠标移动事件:
<script>
const div = document.querySelector('.box')
let i = 1
function mouseMove() {
div.innerHTML = i++
}
function bounced(fun, time) {
let timeId
// 返回一个匿名函数
return function () {
if (timeId) clearTimeout(timeId)
//局部作用域
timeId = setTimeout(fun, time)
}
}
// 以前事件监听的第二个参数 函数后面不加小括号 但debounce要加 因为要往里面传递参数
// box.addEventListener('mousemove', mouseMove)
// div.addEventListener('mousemove', _.debounce(mouseMove, 500))
div.addEventListener('mousemove', bounced(mouseMove, 500))
</script>
函数后面加小括号,会立刻调用(页面一打开就执行,返回一个匿名函数。相当于鼠标一滑动就执行那个匿名函数。