JavaScript——节流和防抖

###防抖

概念

防抖的概念就是:在一定时间再次触发事件，会清空事件重新开始，如果一段时间不触发则执行事件

例子:input输入信息，不可能每次输入都等待执行事件,需要等待用户输入完毕

代码

        //防抖函数
        function dounces(fn,depy = 500){
            let timmer = null
            return function(){
                if(timmer){
                    clearTimeout(timmer)
                }
                timmer = setTimeout(()=>{
                    fn.apply(this,arguments)
                     timmer = null
                },depy)
            }
        }

        var input1 = document.getElementsByClassName('input1')[0]
        input1.addEventListener('keyup',dounces(function(){
                    console.log(input1.value)
        },500))

节流

概念

节流的概念是规定在一定时间内只能触发一次事件，只有超过这个时间才会再次出发

例子:做拖拽时，定时获取位置，或者60s内不允许再次获取验证码

代码

        //节流函数
        function throttle(fn,depy=500){
            let timmer = null
            return function () {
                if(timmer){
                    return
                }
                timmer = setTimeout(()=>{
                    fn.apply(this,arguments)
                    timmer = null
                },depy)
            }
        }
        var a = document.getElementsByClassName('a')[0]
        a.addEventListener('drag',throttle(function (e) {
            console.log(e)
        },500))