JS防抖和节流介绍

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;
                    callback();
                }
            }
        }

三.应用场景

1.防抖 debounce应用

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。
验证手机号是否注册时

2.节流throttle应用

鼠标不断点击触发，mousedown单位时间内只触发一次 (典型的应用:拖拽)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
高频点击提交，表单重复提交

四.总结

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。

函数节流就是射手射击的射速，就算不停按着鼠标射击，也只会在规定射速内射出子弹。