三分钟学会防抖和节流

最新推荐文章于 2022-09-04 23:57:31 发布

胖达爱打代码

最新推荐文章于 2022-09-04 23:57:31 发布

阅读量91

点赞数

分类专栏：实战项目文章标签：前端 javascript 经验分享 js

本文链接：https://blog.csdn.net/weixin_47724586/article/details/108155932

版权

实战项目专栏收录该内容

14 篇文章 0 订阅

订阅专栏

三分钟学会防抖和节流

在实际项目开发中，一直有一个问题困扰着很多开发人员，就是用户的频繁点击问题，总所周知，在真实项目中，用户每点击一次就会向后台发送一条请求，如果不加以限制，将会造成数据库的瘫痪问题，为了防止这种事情发生，因此就出现防抖和节流。

一.防抖(debounce)
概念:当用户点击某个事件行为时，我们设置一个定时器，每点击一次，定时器将会在n秒后(自己设置)延迟执行这个事件，如果用户不断点击，定时器就会自动清零并且重新计时，换句话说，这个用户如果足够有毅力，可以和这个事件耗到两败俱伤，不是你停电关机，就是我手指头抽筋，这就是所谓的防抖，接下来请看小栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div id="box">16465</div>
    <script>
        let btn=document.getElementById('btn');
        /*防抖:用在高频触发的事件，N秒内就执行一次，如果
        n秒内在次触发，那么会重新计算时间*/
        function debounce(func,wait=1000){
            let timer=null;
            return function(){
                clearTimeout(timer);
                timer=setTimeout(()=>{
                    func.call(this);
                    console.log(this);
                    timer=null;
                },wait);
            }
        }
        function fn(){
            console.log(2,this);
        }
        let lazy=debounce(fn,2000);
        btn.onclick=lazy;
    </script>
</body>
</html>

如果当你发现点击之后时两秒后才能看到结果就说明这个结果是对的；

二.节流(throttle)
概念：也是使用在高频触发事件，但在n秒内执行一次，会稀释函数的执行次数，其实现主要依靠时间戳和定时器实现；
在这里插入图片描述
如果当鼠标从粉盒子划出过了两秒才执行就说明成功了。
编码不易，求大佬评论鼓励!

胖达爱打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三分钟学会防抖和节流

三分钟学会防抖和节流在实际项目开发中，一直有一个问题困扰着很多开发人员，就是用户的频繁点击问题，总所周知，在真实项目中，用户每点击一次就会向后台发送一条请求，如果不加以限制，将会造成数据库的瘫痪问题，为了防止这种事情发生，因此就出现防抖和节流。一.防抖概念:当用户点击某个事件行为时，我们设置一个定时器，每点击一次，定时器将会在n秒后(自己设置)延迟执行这个事件，如果用户不断点击，定时器就会自动清零并且重新计时，换句话说，这个用户如果足够有毅力，可以和这个事件耗到两败俱伤，不是你停电关机，就是我手指头抽
复制链接

扫一扫