js和React Hooks的防抖和节流

最新推荐文章于 2024-04-10 23:52:39 发布

江醉鱼

最新推荐文章于 2024-04-10 23:52:39 发布

阅读量1.4k

点赞数 2

分类专栏： js进阶

本文链接：https://blog.csdn.net/me_never/article/details/106642947

版权

概念
防抖：连续调用后等待一段时间执行一次，如果等待时间内又重新触发，将重新等待一段时间执行
节流：连续调用，在指定时间段内内只执行一次

两者的目的都是减少触发的次数，保证性能和效率，区别在于业务场景和需求的不同。可以触发防抖和节流的事件有：onscroll、onmouseMove、onChange、onResize等。

具体怎么实现的还是看代码比较容易理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖：多次调用后只执行一次</title>
</head>
    <body style="height:1400px;">
        <script>
            'use strict'
            function debounce(fn,delay){
   
                var  timer; //闭包保存局部变量
                return function(...args) {
   
                    if(timer){
   
                        clearTimeout(timer)
                    }
                    timer = setTimeout(() => {
   
                        fn(...args);
                        timer = null;

最低0.47元/天解锁文章

江醉鱼

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js和React Hooks的防抖和节流

概念防抖：多次连续调用执行一次节流：多次连续调用，在一段时间内只执行一次两者的目的都是减少触发的次数，保证性能和效率，区别在于业务场景和需求的不同。可以触发防抖和节流的事件有：onscroll、onmouseMove、onChange、onResize等。具体怎么实现的还是看代码比较容易理解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&
复制链接

扫一扫