防抖和节流

原创

菜园前端

发布于 2023-05-26 21:15:24

26500

代码可运行

文章被收录于专栏：前端学习文档前端学习文档

运行总次数：0

代码可运行

原文链接：https://note.noxussj.top/?source=cloudtencent

提示

防抖和节流一般在做用户体验优化的时候会用上。

什么是防抖？

是指一个事件在同一时间内被多次频繁触发后，最终只会执行一次。多次触发后会重新计算时间，只生效最后一次触发。

基础案例

可通过定时器来实现

var timer = 0

function click() {
    clearTimeout(timer)

    timer = setTimeout(function () {
        console.log('鼠标单击触发')
    }, 1000)
}

document.addEventListener('click', click)

应用场景

提交按钮：所有提交后要调用接口的按钮都可以添加防抖，避免多次调用重复接口。

浏览器窗口缩放：在一些特定时候需要监听浏览器窗口变动，变动后重新渲染页面，使用防抖可以防止重复渲染。

什么是节流？

在规定时间内，该事件只会被触发第一次。后续触发的事件将会被忽略，直到计时结束。

基础案例

可通过定时器和锁定标识实现。

var isLock = false

function click() {
    if (isLock) return

    isLock = true

    setTimeout(function () {
        console.log('鼠标单击触发')
        isLock = false
    }, 1000)
}

document.addEventListener('click', click)