JS防抖与节流

防抖 : (延迟执行，过 delay 秒再执行)

延迟执行

HTML部分

    <input type="button" id="btn" value="提交">

JS

btn.onclick = debounced(function() {
            console.log(1111)
        }, 2000)


// fn是需要防抖执行的函数
// delay是单位时间，：是否立即执行
        function debounced(fn, delay) {
            var timer;    //定时器
            return function() {
                // 如果定时器存在，就关闭定时器
                if(timer) clearTimeout(timer);
                timer = setTimeout(function() {
                    fn.call(this)  //执行fn函数
                }.bind(this), delay)
            }
        }

防抖 :

(立即执行，只有每次(过了几秒之后)第一次调用这个函数时才会执行一次)

HTML部分

 <input type="button" id="btn" value="提交">

JS

防抖: 立即执行

// 防抖: 立即执行
        //(先立即执行一次，只有每次(过了传参几秒之后)再次调用这个函数时才又会执行第二次，依次类推)
        function debounced(fn,delay){
            var timer;
            return function(){
                if(timer) clearTimeout(timer);//取消之前的定时器
                var flag=!timer;  //类型转换
                timer=setTimeout(()=>{  //增加一个定时器
                    timer=null;   //清空当前定时器的句柄
                },delay)
                if(flag) fn.call(this);//第一次执行
            }
        }

节流

定时器方法 主用PC端

//滚动条事件
window.onscroll=throttle(function(){
            console.log(222222222)
        },2000)

        // 节流: fn是需要节流执行的函数，delay是单位时间
        function throttle(fn, delay) {
            var timer = null
            return function () {
                // 判断当前是否存在定时器，如果不存在，就添加一个定时器，执行目标函数，执行完目标函数之后，再将定时器清空
                if (!timer) {
                    timer = setTimeout(function () {
                        timer=null
                        fn.call(this)
                    }.bind(this), delay)
                }
            }
        }

时间戳方法 主用移动端

window.onscroll=throttle(function(){
            console.log(222222222)
        },2000)

        //时间戳   节流
        function throttle(fn, delay) {
            var prev=0;  //上次纪录的时间
            return function(){
                var now=Date.now();  //当前时间
                if(now-prev>delay){  //当前时间-上次时间>等待时间
                    fn.call(this)  //执行函数  发送请求
                    prev=now;  //重置上次记录时间
                }
            }
        }