什么是防抖和节流？该怎么实现？

最新推荐文章于 2024-09-13 23:32:49 发布

山月1

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量345

点赞数 6

文章标签：前端 javascript

本文链接：https://blog.csdn.net/2203_75321064/article/details/136354143

版权

本文介绍了防抖和节流两种技术，用于处理高频事件以避免性能下降和减轻后端压力。通过HTML和JavaScript示例展示了如何在搜索输入框提示和窗体拖动调整大小场景中使用这两种技术。

摘要由CSDN通过智能技术生成

1.概念解释

防抖：某一高频事件不断被触发，仅在最后一次真正执行事件处理代码。
节流：某一高频事件呗触发时，确保在每一个特定的时间段内被执行一次。
两者相似点：都是为应对事件持续频繁发生，造成前端性能下降或对后端服务造成的压力。
两者的区别：节流会不断的触发，而防抖仅在最后一次触发。防抖适用于搜索输入框提示，仅在输入停止后进行一次提示更新，以减少后台压力。节流适用于窗体以拖动的方式调整大小，在每次特定的时间片结束后触发一次窗体大小调整。

2.实现方式

2.1防抖

效果：在一直点击的情况下只会执行最后一次
请添加图片描述

实现方式
html

<button class="btn">防抖</button>

function debounce(timeout, fn) {
        let time = null
        return function () {
            let _arg = arguments
            clearTimeout(time)
            time = setTimeout(() => {
                fn.apply(this, _arg)
            }, timeout)
        }
    }
    let a = document.querySelector(".btn");
    a.onclick = debounce(2000, function () {
        console.log('111');

    })

2.2节流
效果：在一直点击的情况下在你设置的时间内只会执行一次
请添加图片描述

实现方式
html

<button class="btn">节流</button>

function throttling(timeout, fn) {
        let _playing = null
        return function () {
            let _arg = arguments
            if (_playing) {
                return
            }
            _playing = true
            setTimeout(() => {
                fn.apply(this, _arg)
                _playing = false
            }, timeout)
        }
    }
    let a = document.querySelector(".btn");
    a.onclick = throttling(2000, function () {
        console.log('111');

    })