网站导航
> 文章列表 > JavaScript——防抖与节流

JavaScript——防抖与节流

网友: 文章列表 2024-03-21 16:59:01

JavaScript——防抖与节流

JavaScript——防抖与节流

一、防抖(debounce)

1.1 概念

防抖：单位时间内，频繁触发事件，只执行最后一次。

举个栗子：在王者荣耀游戏内频繁按回城键，每一次按下回城键都会打断上一次回城，并且重新开始回城。

使用场景：

  1. 搜索框搜索输入：只需用户最后一次输入完，再发送请求，而不是输入一个字就发送一次请求。
  2. 手机号、邮箱验证输入检测：输完再自动验证。

实现防抖的两种方式：

  1. 使用工具库lodash中的_.debounce()方法
  2. 手写防抖函数

下面我们分别使用这两种方法优化以下需求的实现：

鼠标每移动一次，盒子内的数值加一。（防抖间隔设置为500毫秒）

1.2 lodash中的_.debounce()实现防抖

<!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>防抖</title><script src="./node_modules/lodash/lodash.js"></script><style>.box {width: 300px;height: 300px;background-color: pink;text-align: center;line-height: 300px;font-size: 40px;font-weight: 900;color: aliceblue;}</style>
</head><body><div class="box"></div><script>const box = document.querySelector('.box')// console.log(box);function mouseMove() {box.innerHTML = num++}let num = 0box.addEventListener('mousemove', _.debounce(mouseMove, 500))</script>
</body></html>

JavaScript——防抖与节流

该方法的详细使用可参考文档： JavaScript 实用工具库——lodash中文文档

1.3. 手写防抖函数

核心：利用 setTimeout 定时器实现

  1. 声明定时器变量

  2. 每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器

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

  4. 定时器里面写函数调用

let num = 0
const box = document.querySelector('.box')
function mouseMove() {box.innerHTML = num++
}
function debounce(fn, t) {let timerreturn function () {  // 返回匿名函数if (timer) clearTimeout(timer)timer = setTimeout(function () {fn()  // 加小括号调用函数}, 500)}
}
box.addEventListener('mousemove', debounce(mouseMove, 500))

能够实现和lodash中的_.debounce()一样的效果。

二、节流(throttle)

2.1 概念

节流：单位时间内，频繁触发事件，只执行第一次。

举个栗子：王者荣耀技能有一定cd，点击释放技能后，cd期间无法继续释放技能。

使用场景：

高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等。

实现防抖的两种方式：

  1. 使用工具库lodash中的_.throttle()方法
  2. 手写节流函数

下面我们分别使用这两种方法优化以下需求的实现：

鼠标在盒子上移动，不管移动多少次，每隔2000毫秒才+1。

2.2 lodash中的_.throttle()实现节流

const box = document.querySelector('.box')
function mouseMove() {box.innerHTML = num++
}
let num = 0
box.addEventListener('mousemove', _.throttle(mouseMove, 2000))

JavaScript——防抖与节流

2.3 手写节流函数

节流的核心就是利用定时器来实现：

  1. 声明一个定时器变量
  2. 当鼠标每次滑动都先判断是否有定时器，如果有定时器则不开启新定时器
  3. 如果没有定时器则开启定时器，记得存到变量里面

注意：1.定时器里面调用执行的函数 2.定时器里面要把定时器清空。

let num = 0const box = document.querySelector('.box')function mouseMove() {box.innerHTML = num++}function throttle(fn, t) {let timer = nullreturn function () {  // 返回匿名函数if (!timer) {timer = setTimeout(function () {fn()  // 加小括号调用函数timer = null  // 清空定时器}, t)} else {return}}}box.addEventListener('mousemove', throttle(mouseMove, 2000))

能够实现和lodash中的_.throttle()一样的效果。

值得注意的是：

定时器里面清空定时器只能将定时器置空，不能使用clearTimeout(定时器变量名)，因为定时器还在运作，无法使用clearTimeout(定时器变量名)。

三、总结

性能优化 说明 使用场景
防抖 单位时间内，频繁触发事件，只执行最后一次 搜索框搜索输入、手机号、邮箱验证输入检测
节流 单位时间内，频繁触发事件，只执行第一次 高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等
网络标签：

相关问题