帮你搞懂防抖和节流!

2023年3月29日

防抖和节流

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

什么是防抖?

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

基础案例

可通过定时器来实现

    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)
应用场景

搜索框联动查询:用户在搜索框输入内容值,可定时查询接口返回展示的内容。

获取验证码功能:获取手机验证码后,在规定时间内无法在进行获取。


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

服务器托管,北京服务器托管,服务器租用 http://www.hhisp.net

hackdl

咨询热线/微信 13051898268