1.防抖函数
1.1定义
说明：在一定时间内，频繁执行事件，只执行最后一次函数。(英雄联盟回城)
1.2步骤：
- 声明定时器函数
- 判断是否有定时器函数，如果有定时器函数的话就清除定时器。。
- 如果没有定时器函数的话，就开启定时器函数。
- 定时器函数放入执行的函数。
1.3代码
1.3.1原生JS实现
<!DOCTYPE html>
<html lang="zh">
<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.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
font-size: 20px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
// 获取盒子
const box = document.querySelector(".box")
// 说明变量
let i = 0
function mouseAdd() {
box.innerHTML = i += 1
}
// 防抖函数：在规定的时间，频繁点击，只执行最后一次
function debounce1(fn, time) {
// 声明一个定时器变量
let timer;
// 返回一个匿名函数
return function () {
// 如果有定时器那么就清除
if (timer) clearTimeout(timer)
// 如果没有就创建一个定时器
timer = setTimeout(function () {
// 在定时器函数中执行要执行的函数
fn();
}, time)
}
}
box.addEventListener("mousemove", debounce1(mouseAdd, 1000)
)
</script>
</body>
</html>1.3.2引入第三方库lodash
<!DOCTYPE html>
<html lang="zh">
<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.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
font-size: 20px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
// 获取盒子
const box = document.querySelector(".box")
// 说明变量
let i = 0
function mouseAdd() {
box.innerHTML = i += 1
}
box.addEventListener("mousemove", _.debounce(mouseAdd, 1000)
)
</script>
</body>
</html>1.3.3效果图
2.节流函数
2.1定义
说明：在一定时间内，频繁执行事件，只执行一次函数(英雄联盟中的技能冷却)
2.2步骤：
- 声明定时器函数,并将定时器赋值为空。
- 没有定时器函数，就开启定时器函数。
- 定时器函数放入执行的函数，并将定时器变量赋值为空。
2.3代码
2.3.1原生JS实现
<!DOCTYPE html>
<html lang="zh">
<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.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
font-size: 20px;
line-height: 200px;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
const box = document.querySelector(".box")
let i = 0
function moveAdd() {
box.innerHTML = i += 1
}
//节流函数：在一定时间内，频繁执行事件，只执行一次函数。
function throttle(fn, time) {
let timer=null
return function () {
if (!timer) {
timer = setTimeout(function () {
fn();
timer = null
}, time)
}
}
}
box.addEventListener("mousemove", throttle(moveAdd, 1000))
</script>
</body>
</html>2.3.2引入第三方lodash库
<!DOCTYPE html>
<html lang="zh">
<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.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
font-size: 20px;
line-height: 200px;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
const box = document.querySelector(".box")
let i = 0
function moveAdd() {
box.innerHTML = i += 1
}
box.addEventListener("mousemove",_.throttle(moveAdd,1000))
</script>
</body>
</html>2.3.3效果图
