js 性能优化节流防抖

向右看齐 2021-08-27 17:20 403阅读 0赞

1.防抖

使用场景

1.监听一个输入框 文字变化后触发chang事件

2.直接用keyup事件 则会频繁触发change事件

3.防抖：用户输入结束或者暂停后 才会触发change事件

<!DOCTYPE html>
    
    <head>
        <meta charset="utf-8">
        <title>
           防抖（用于频繁请求数据）
        </title>
    
        <style>
    
        </style>
    </head>
    
    <body>
        1.监听一个输入框 文字变化后触发chang事件
        2.直接用keyup事件 则会频繁触发change事件
        3.防抖：用户输入结束或者暂停后 才会触发change事件
      <input type="text" id="input1">
    </body>
    
    </html>
    <script>
        const input1=document.getElementById('input1')
      /*   let timer=null
        input1.addEventListener('keyup',function(){
            if(timer){
                clearTimeout(timer)
            }
           timer=setTimeout(()=>{
                console.log(input1.value)
                timer=null
            },1000)
            
        }) */
    
        //封装考察定时器
        function debounce(fn,delay=500){
            //timer 在闭包中
            let timer=null
            return function(){
                if(timer){
                    clearTimeout(timer)
                }
                timer=setTimeout(()=>{
                    fn.apply(this,arguments)
                    timer=null
                },delay)
            }
        }
      input1.addEventListener('keyup',debounce(()=>{
          console.log(input1.value)
      },1000))
        
    </script>

2节流

使用场景

1.拖拽一个元素时，要随时拿到该元素被拖拽的位置

2.直接用drag事件则会频繁触发很容易导致卡顿

3.节流:不管拖拽速度多块都会每隔一定的事件触发一次

<!DOCTYPE html>
    
    <head>
        <meta charset="utf-8">
        <title>
            节流（保持一个频率触发）
        </title>
    
        <style>
            #div1 {
                border: 1px solid #cccccc;
                width: 300px;
                height: 100px
            }
        </style>
    </head>
    
    <body>
        使用场景
        1.拖拽一个元素时，要随时拿到该元素被拖拽的位置
        2.直接用drag事件则会频繁触发很容易导致卡顿
        3.节流:不管拖拽速度多块都会每隔一定的事件触发一次
    
        <div id="div1" draggable="true">
            可拖拽
        </div>
    
        </html>
        <script>
            const div1 = document.getElementById('div1')
          /*   let timer=null
            div1.addEventListener('drag', function (e) {
                if(timer){
                    return
                }
                timer=setTimeout(()=>{
                    console.log(e.offsetX, e.offsetY)
                    timer=null
                },500)
                
            }) */
           //封装函数
            function throttle(fn,delay=200){
                let timer=null;
                return function(){      //返回一个函数
                    if(timer){
                        return
                    }
                    timer=setTimeout(()=>{
                        fn.apply(this,arguments) //fn 代表传进去的函数 (e)=>{console.log(e.offsetX, e.offsetY) }  arguments:可以传递e 参数 fn():报错
                        timer=null;
                    },delay)
                }
            }
            div1.addEventListener('drag',throttle((e)=>{
                console.log(e.offsetX, e.offsetY)
            }))
    
        </script>