防抖和节流

阿飞学不会吖

已于 2022-07-21 20:07:19 修改

阅读量156

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-07-21 20:03:30 首次发布

本文链接：https://blog.csdn.net/qq_48943782/article/details/125919951

版权

防抖和节流

通常高频事件：onscroll,onresize,keyup/keydown,mousemove

1. 防抖和节流原理

防抖原理

事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；

当预定的时间内没有调用该函数，则执行事件响应的函数。

节流原理

如果你持续触发事件，每隔一段时间，只执行一次事件

2. 防抖节流的实现

不对高频事件做任何措施，效果如图：

在这里插入图片描述

1）利用lodash插件中的debounce函数实现防抖

在线开源库可以在Staticfile CDN这里直接搜索lodash即可
debounce(fun,delay)

fun:执行的函数

delay:延迟时间

<body>
<div id="wrapper"></div>
</body>
<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.js"></script>
<script>
    let count = 0
    let wrp = document.getElementById("wrapper")
    function wrpMove(){
        wrp.innerHTML = count++
    }
    wrp.onmousemove = _.debounce(wrpMove,300)
</script>

实现防抖效果如图：

在这里插入图片描述

2）利用lodash插件中的throttle函数实现节流

throttle(fun,delay)

fun:执行的函数

delay:延迟时间

<body>
<div id="wrapper"></div>
</body>
<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.js"></script>
<script>
    let count = 0
    let wrp = document.getElementById("wrapper")
    function wrpMove(){
        wrp.innerHTML = count++
    }
    wrp.onmousemove = _.throttle(wrpMove,1000)
</script>