防抖与节流

最新推荐文章于 2024-08-04 16:33:59 发布

LZC_yEllOwBooK

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量122

点赞数

分类专栏：防抖与节流简易方法 javascript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/LZC_yEllOwBooK/article/details/120405620

版权

简易方法同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

防抖与节流

1 篇文章 0 订阅

订阅专栏

防抖

防止抖动，在元素上鼠标移动后半秒，鼠标没有再次移动，才会计算次数，否则就重新计算时间

核心用延时计时器

1.获取页面元素，绑定上防抖事件

    // 获取到页面的元素
        var div1=document.querySelector('.div1')
        var div2=document.querySelector('.div2')
        var div3=document.querySelector('.div3')
        var div4=document.querySelector('.div4')
         
        // 给元素绑定防抖
            div1.onmousemove=debounce
            div2.onmousemove=debounce
            div3.onmousemove=debounce
            div4.onmousemove=debounce

2.防抖函数代码

  // 防抖函数
            var time
            // 首先计时器元素要写在函数外，利用作用域链
            // 这样同时只有一个计时器存在，防止多次触发
            function debounce(){
                var that=this
                // 首先要把this指向更改为调用者

                clearTimeout(time)
                // 如果有计时器的存在就清空


               time=setTimeout(function(){
                //    在没有计时器的情况下设置计时器

                    var sum=that.innerHTML  
                    // 把当前元素内的数值储存  

                    that.innerHTML=++sum
                    // 半秒内没有触发的情况下就加一
                },500)
            }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 50%;
            height: 500px;
            background-color: red;
            font-size: 100px;
            text-align: center;
            line-height: 200px;
            float: left;
        }
        .div2{
            width: 50%;
            height: 500px;
            background-color: pink;
            font-size: 100px;
            text-align: center;
            line-height: 200px;
            float: right;
        }
        .div3{
            width: 50%;
            height: 500px;
            background-color: yellow;
            font-size: 100px;
            text-align: center;
            line-height: 200px;
            float: left;
        }
        .div4{
            width: 50%;
            height: 500px;
            background-color: green;
            font-size: 100px;
            text-align: center;
            line-height: 200px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="div1">0</div>
    <div class="div2">0</div>
    <div class="div3">0</div>
    <div class="div4">0</div>
    <script>
        // 获取到页面的元素
        var div1=document.querySelector('.div1')
        var div2=document.querySelector('.div2')
        var div3=document.querySelector('.div3')
        var div4=document.querySelector('.div4')
         
        // 给元素绑定防抖
            div1.onmousemove=debounce
            div2.onmousemove=debounce
            div3.onmousemove=debounce
            div4.onmousemove=debounce

        // 防抖函数
            var time
            // 首先计时器元素要写在函数外，利用作用域链
            // 这样同时只有一个计时器存在，防止多次触发
            function debounce(){
                var that=this
                // 首先要把this指向更改为调用者

                clearTimeout(time)
                // 如果有计时器的存在就清空


               time=setTimeout(function(){
                //    在没有计时器的情况下设置计时器

                    var sum=that.innerHTML  
                    // 把当前元素内的数值储存  

                    that.innerHTML=++sum
                    // 半秒内没有触发的情况下就加一
                },500)
            }
    </script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------

如果有event的存在，就需要用到arguments

 var sum=0
        function move1(){
          sum++
          div1.innerHTML=sum
          console.log(e.clientX)
        }


        function be(callback,target){
            var time
            return function(){
               if(time){
                clearTimeout(time)
               }
               var that=this
                var arg=arguments
                time=setTimeout(function(){
                    callback.apply(that,arg)
                }
                ,target)
            }
        }

        div1.onmousemove=be(move1,500)
        // 上边的写法是应为event 是需要指向的，也要获取的 没有event会简写一点

解释

 // 需要执行的代码
        var sum=0
        function move1(){
          sum++
          div1.innerHTML=sum
          console.log(e.clientX)
        }

        // 防抖函数，传递进来触发函数和事件
        function be(callback,target){


             // 闭包，return的函数会用外边的变量，所以只会有一个值
            var time
            

            // 因为要传递的是函数体，所以return一个函数体
            return function(){



                // 判断有没有time，有的话为true，则清除time
               if(time){
                clearTimeout(time)
               }



            //    在这里保存this指向，来替换下边的this的指向
               var that=this



            //    因为arguments是函数的形参伪数组
                // 事件里面自带有event事件，所以保存起来
                var arg=arguments



                // 开启计时器
                time=setTimeout(function(){


                     // 传递进去参数，arg等价于event，因为event需要指向
                    // 这里调用执行函数，用apply更改指向，为调用元素
                    // 这里用apply而不用call，是应为arguments是个伪数组
                    callback.apply(that,arg)
                }



                // 设置上时间
                ,target)
            }
        }
        // 执行防抖函数，把要执行的代码作为参数传递到防抖函数内
        div1.onmousemove=be(move1,500)
        // 上边的写法是应为event 是需要指向的，也要获取的 没有event会简写一点

--------------------------------------------------------------------------------------

节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            background-color: red;
            font-size: 100px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>0</div>
    <script>
        var div=document.querySelector('div')
        var time=0
        var sum=0
        div.onmousemove=function(){
            var perv=+new Date()
            if(perv-time>5000){
                div.innerHTML=++sum
                time=perv
            }
        }
    </script>
</body>
</html>

核心思路

  div.onmousemove=function(){
            var perv=+new Date()
            // 每一次触发，获取当前的时间
            if(perv-time>5000){
                // 判断当前时间减去上一次时间，大于半秒才会再次加一
                div.innerHTML=++sum
                time=perv
                // 然后储存上一次时间
            }
        }

求打赏！！！！！！！！！让我吃馒头能加辣条

LZC_yEllOwBooK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖与节流

防抖防止抖动，在元素上鼠标移动后半秒，鼠标没有再次移动，才会计算次数，否则就重新计算时间核心用延时计时器1.获取页面元素，绑定上防抖事件 // 获取到页面的元素 var div1=document.querySelector('.div1') var div2=document.querySelector('.div2') var div3=document.querySelector('.div3') var.
复制链接

扫一扫

专栏目录