ES6学习笔记（八）——性能优化（节流与防抖）

原创已于 2024-07-05 11:29:22 修改

· 259 阅读

0 ·

版权

文章标签：

#学习 #笔记

于 2023-11-01 22:38:41 首次发布

ES6学习笔记专栏收录该内容

10 篇文章

订阅专栏

一、防抖

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间（英雄联盟英雄回城，如果被打断了，只能重新B回城）

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

举个栗子：

北京买房政策：需要连续5年的社保，如果中间有一年断了社保，则需要从新开始计算

比如，我 2020年开始计算，连续交5年，也就是到2024年可以买房了，包含2020年。但是我 2024年断社保了，整年没交，则需要从2025年开始算第一年往后推5年… 也就是 2029年才能买房…

开发使用场景- 搜索框防抖

假设输入就可以发送请求，但是不能每次输入都去发送请求，输入比较快发送请求会比较多

我们设定一个时间，假如300ms，当输入第一个字符时候，300ms后发送请求，但是在200ms的时候又输入了一个字符，则需要再等300ms 后发送请求

搜索框搜索输入。只需用户最后一次输入完，在发送请求

手机号、邮箱验证输入检测

1.1 案例

利用防抖来处理-鼠标滑过盒子显示文字

要求：鼠标在盒子上移动，鼠标停止之后，500ms后里面的数字就会变化+1

利用防抖的方式实现

1.2 使用 Lodash 库实现防抖

<script src="./lodash.min.js"></script>

1.3 手写一个防抖函数来处理

核心思路：

利用定时器实现，当鼠标滑过，判断有没有定时器，还有就清除，以最后一次滑动为准开启定时器

① 申明一个定时器变量

② 当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器

③ 如果没有定时器则开启定时器，记得存到变量里

④ 在定时器里调用要执行的函数

二、节流

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

举个栗子：

王者荣耀技能冷却，期间内无法继续释放技能

和平精英98k换子弹期间不能射击

开发使用场景

小米轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动就可以加节流

假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，则嗖嗖嗖的切换

加上节流效果，不管快速点击多少次， 300ms时间内，只能切换一张图片。

2.1 案例

利用节流来处理-鼠标滑过盒子显示文字

要求：鼠标在盒子上移动，不管移动多少次，每隔 500ms才+1

2.2 使用 Lodash 库实现节流

<script src="./lodash.min.js"></script>

2.3 手写一个节流函数来处理

核心思路：

节流的核心就是利用定时器（setTimeout）来实现

① 声明一个定时器变量

② 当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器

③ 如果没有定时器则开启定时器，记得存到变量里面

定时器里面调用执行的函数

定时器里面要把定时器清空

let box = document.querySelector('.box')

let i = 0
function mousemove() {
    box.innerHTML = i++ 
}

// box.addEventListener('mousemove', _.throttle(mousemove, 500))

function throttle(fn, t) {
    // ① 声明一个定时器变量
    // ② 当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器
    // ③ 如果没有定时器则开启定时器，记得存到变量里面
    //      定时器里面调用执行的函数
    //      定时器里面要把定时器清空
    let timer = null
    return function() {
        if (!timer) {
            timer = setTimeout(function() {
            fn()
            timer = null
            }, t)
        }
    }
}
box.addEventListener('mousemove', throttle(mousemove, 500))