DOM操作--防抖和节流

最新推荐文章于 2022-08-30 09:51:26 发布

H5_ljy

最新推荐文章于 2022-08-30 09:51:26 发布

阅读量259

点赞数

分类专栏： DOM 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_56973906/article/details/126217686

版权

DOM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

防抖和节流

防抖
- 什么是防抖？
- 如何实现防抖
节流
- 什么是节流？
- 如何实现节流？

防抖

什么是防抖？

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
比如：登录注册按钮，当用户点击时会向后端发送数据；
但当用户一直点击，如果我们不设置防抖，则会导致后台服务器一直接受这个数据，从而导致崩溃；所以必须设置防抖，来规定n秒后触发我们的业务，如果在n秒内点击了则重新计时。

如何实现防抖

//没封装前
<body>
    <button id="btn">登录</button>
   <script>
        let btn=document.getElementById("btn")
        function fn(){
            console.log(666)
        }
        function fangdou(){
        var timer=null
        return function(){
            clearTimeout(timer)
            timer=setTimeout(()=>{
                fn()
            },1000)
        }
        }
        btn.onclick=fangdou()
   </script>
</body>

//封装防抖函数
        function fangdou(time,callback) { 
            var timer=null
            return function () { 
                clearTimeout(timer)
                timer=setTimeout(()=>{
                    callback()
                },time)
             }
         }
         //使用方法
        btn.addEventListener("click",fangdou(1000,()=>{
            console.log(666)
        }))

节流

什么是节流？

指连续触发事件但是在n秒中只执行一次函数。节流会降低函数的执行频率。比如：将mousemove事件触发的频率降低。

如何实现节流？

//封装函数
           function jieliu(time,callback){
                var timer=null
                return function () {                     
                    if(!timer){
                        timer=setTimeout(()=>{
                            callback()
                            timer=null
                        },time)
                    }
                 }
            }
          // 使用方法
          document.onmousemove=jieliu(2000,()=>{
                console.log(666)
            })

H5_ljy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM操作--防抖和节流

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。比如：登录注册按钮，当用户点击时会向后端发送数据；但当用户一直点击，如果我们不设置防抖，则会导致后台服务器一直接受这个数据，从而导致崩溃；所以必须设置防抖，来规定n秒后触发我们的业务，如果在n秒内点击了则重新计时。指连续触发事件但是在n秒中只执行一次函数。节流会降低函数的执行频率。比如：将mousemove事件触发的频率降低。...
复制链接

扫一扫