简洁高效,让你认清 防抖和节流;

Posted lkkk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简洁高效,让你认清 防抖和节流;相关的知识,希望对你有一定的参考价值。

 /*
        *  fn -- 用户传入函数
        *  timer -- 用户传入间隔时间
        *  debounce_防抖作用:防止用户反复点击,比如提交表单,浏览器滚动监听等,当用户停止点击时候,间隔时间大于timer,则执行传入函数;
        *  throttle_节流作用:监听事件在timer规定时间内只执行一次,达到节流作用;
        */ 
        function debounce_(fn,timer){
            return function(){
                clearTimeout(fn.id);
                var that = this;
                fn.id = setTimeout(function(){
                    fn.constructor == Function && fn.call(that);  //这样可以获取到点击事件源, 
                    // fn()     //这样也可以运行,
                },timer);
            }
        };
        function throttle_(fn,timer){
            var initTimer = new Date();            var first = true;   //因为第一次判定时候当前时间和初始时间也许相等,差值也许会小于我们给定的timer,程序不会执行,所以加上这个好些;
            return function(){  //采用闭包
            var nowTimer = new Date();   
                if( nowTimer - initTimer  >= timer || first){
                    fn.constructor == Function && fn.call(this);  //判断fn是否为函数;是的话就执行 fn.call(this);
                    initTimer = new Date();
                    first = false;
                }
            }
        }
        function test(){
            console.log(‘test‘);
        }
        document.querySelector(‘button‘).addEventListener(‘click‘,throttle_(test,2000));  //节流
        // document.querySelector(‘button‘).addEventListener(‘click‘,debounce_(test,300));  //防抖

以上是关于简洁高效,让你认清 防抖和节流;的主要内容,如果未能解决你的问题,请参考以下文章

JS基础-防抖和节流

JS的防抖和节流

防抖和节流啥区别,实现一个防抖和节流

Js中防抖和节流的区别,论如何避免重复点击

ajax基础5--防抖和节流

防抖和节流