js函数节流和函数防抖

节流概念(Throttle)

按照设定的时间固定执行一次函数,比如200ms一次。注意:固定就是你在mousemove过程中,执行这个节流函数,它一定是200ms(你设定的定时器延迟时间)内执行一次。没到200ms,一定会返回,没有执行回调函数的。

//函数节流
        function throttle(fn, wait){
            var timer = null;
            return function(){
                var _this = this;
                var args = arguments;
                if(!timer){
                    timer = setTimeout(function(){
                        fn.apply(_this, args);
                        timer = null;
                    }, wait);
                }
            }
        }

防抖概念(Debounce)

抖动停止后的时间超过设定的时间时执行一次函数。注意:这里的抖动停止表示你停止了触发这个函数,从这个时间点开始计算,当间隔时间等于你设定时间,才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间,则一定不会到回调函数那一步。

 function antiShake(func, delay){
            var timer = null;
            return function(...argus){
                var _this = this
                //this = obj
                clearTimeout(timer);
                timer = setTimeout(function(){
                    func.apply(_this, argus);
                }, delay);
            }
        }
请用今天的努力,让明天没有遗憾。
原文地址:https://www.cnblogs.com/cupid10/p/15617742.html