函数的防抖和节流

JS防抖和节流

一.背景

我们日常开发中会经常遇到的问题,用户的行为会频繁的触发事件执行，对DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数防抖(debounce)和函数节流(throttle)就是为了解决类似的需求应运而生的。

二.概念

函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间原理却不一样函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行
函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象
1.防抖debounce
函数防抖,就是指触发事件后在规定时间内函数只能执行一次,如果在规定时间内又触发了事件,则会重新计算函数的执行时间
​ 通俗的说,当我们一个动作,连续被触发,那么就只执行最后一次,比如我们电梯进人,电梯需要感应到没有人了才会自动观门,每次进入一个,电梯就会多等几秒钟才会关闭

 		var ipt1 = document.querySelector('.ipt1');
        var comment = document.querySelector('.comment');

        //没有防抖
        ipt1.onkeyup = function () {
            $.ajax({
                method: 'get',
                url: '',
                data: {
                    searchText: ipt1.value
                },
                success: function (res) {
                    comment.innerHTML += res;
                }
            });
        }
      

这是没有防抖的代码,文本框每次输入,键盘按下的时候,都会执行,大大的浪费了请求的资源,所以呢,我们优化一下上述代码,使用防抖原理

		// 防抖
        var deferTimer;
        ipt2.onkeyup = function () {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                $.ajax({
                    method: 'get',
                    url: '',
                    data: {
                        searchText: ipt2.value
                    },
                    success: function (res) {
                        comment.innerHTML += res;
                    }
                });
            }, 400);
        }
        

这样我们就能节省请求的资源了,现在对防抖封装一下,以便日后使用:

  		/*
        *   防抖函数
        *   @delay  延迟多少毫秒
        *   @callback 请求网络资源的回调函数
        */
        function debounce(delay, callback) {
            var deferTimer;
            return function () {
                //清除延时器
                clearTimeout(deferTimer);
                deferTimer = setTimeout(function () {
                    callback();
                }, delay);
            }
        }
     

2.节流throttle
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
跟我们生活的一个情景很相似,进入公司里面时,刷卡过闸机时,每个人等待几秒后关闭,等待下一个人

  		//节流
        var lastTime = Date.now();
        ipt3.onkeyup = function () {
            var nowTime = Date.now();
            if (nowTime - lastTime >= 1000) {
                lastTime = nowTime;
                $.ajax({
                    method: 'get',
                    url: '',
                    data: {
                        searchText: ipt2.value
                    },
                    success: function (res) {
                        comment.innerHTML += res;
                    }
                });
            }
        }
      

上述代码就是采用了函数节流的原理实现,同样,下面封装一个节流函数

  		/*
        *   节流函数
        *   @delay  延迟多少毫秒
        *   @callback 请求网络资源的回调函数
        */
        function throttle(delay, callback) {
            var lastTime = Date.now();
            return function () {
                var nowTime = Date.now();
                //对比时间搓,如果超过了规定时间则可以执行
                if (nowTime - lastTime >= delay) {
                    lastTime = nowTime;
                    callba ck();
                }
            }
        }

三.应用场景

1.防抖 debounce应用
#window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，#手机号是否注册时
2.节流throttle应用
鼠标不断点击触发，mousedown单位时间内只触发一次 (典型的应用:拖拽)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
高频点击提交，表单重复提交

四.总结

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。
函数节流就是射手射击的射速，就算不停按着鼠标射击，也只会在规定射速内射出子弹。