JavaScript——防抖与节流

时间：2022-11-27 01:20:12

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 = 0
        box.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 timer
    return 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 = 0
        const box = document.querySelector('.box')
        function mouseMove() {
            box.innerHTML = num++
        }
        function throttle(fn, t) {
            let timer = null
            return 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等等
标签：

相关文章