JS中手撕防抖函数和节流函数

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 = 0function 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 = 0function 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 = 0function moveAdd() {box.innerHTML = i += 1}//节流函数：在一定时间内，频繁执行事件，只执行一次函数。function throttle(fn, time) {let timer=nullreturn 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 = 0function moveAdd() {box.innerHTML = i += 1}box.addEventListener("mousemove",_.throttle(moveAdd,1000))</script>
</body>
</html>