来,安排一下面试必考的函数节流防抖节流: 鼠标连续多次click事件，mousemove 事件，监听滚动事件，比如是否

关于函数节流防抖的文章还是挺多的,包括我在内的大家肯定也都看了一些,emmm...我今天想以一种更一种更语义化的理解思路分享给大家

前言

我们在日常生活中应该都干过这样一件事, 当我们浏览网页的时候, 电脑有时会卡住, 这时候我们就会很烦燥的多点几下 (真的点不开说明得换电脑了[emoj]) 这时其实我们已经发送请求了,频繁的触发事件会造成请求资源的浪费, 这个时候就得用节流防抖来优化性能了

概念

函数节流: 定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效
函数防抖: 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时

节流

概念看了之后, 大家心里肯定会想(你特么说了跟白说似的[捂脸]) 没关系, 我还会语义化的讲解, 先说下节流, 在规定时间内, 触发事件后函数会被调用, 但如果在这段时间间隔内多次触发事件函数也还是只会被执行一次, 这一次时间间隔之后重新触发, 才会被再次调用(说白了就是一直在跑,只不过一定时间内只能跑一次~)

简单的代码实现:

function throttle(fn, delay) {
    let lastTime; 
    let timer; 
    delay || (delay = 300); // 默认间隔为300ms
    return function(arguments) {
        let context = this;
        let args = arguments;
        let nowTime = +new Date(); // 获取系统当前的时间
        if (lastTime && nowTime < lastTime+ delay) { // 当前距离上次执行的时间小于设置的时间间隔
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                lastTime= nowTime ;
                fn.apply(context, args);
            }, delay);
        } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
            lastTime= nowTime ;
            fn.apply(context, args);
        }
    };
}

防抖

多次触发事件后, 事件处理函数只会执行一次, 对事件处理函数进行延时操作, 若在设定的延时到来之前再次触发事件则清除上一次的定时器, 重新定时(这是一个小傲娇[笑哭/],我就是要等n秒再执行, 你再按, 我再等n秒)

简单的代码实现:

  function ajax(content) {//模拟ajax请求
            console.log('ajax request ' + content)
        }
        function debounce(fun, delay) {
            return function (arguments) {
                //获取函数的作用域和变量
                let that = this;
                let args = arguments;                    
                clearTimeout(fun.id)// 清除定时器
                fun.id = setTimeout(function () {
                    fun.call(that, args )
                }, delay)
            }
        }            
        let debounceAjax = debounce(ajax, 1000)
        XXX.addEventListener('keyup', function (e) {
            debounceAjax(e.target.value)
        })

使用场景

防抖: 搜索框输入自动联想匹配, 如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的, 我们期望的是当用户最后输入完成的时候触发事件, 函数防抖就可以实现这样的优化
节流: 鼠标连续多次click事件，mousemove 事件，监听滚动事件，比如是否滑到底部自动加载更多等等...

区别

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

就好比乘坐电梯, 函数防抖是第一个人进去之后电梯会等3秒过后再关门, 但如果这5秒内有人按电梯, 则电梯关门时间按这个人进来的5秒之后计算, 函数节流则好比是在乘坐另外一台电梯, 这台电梯是第一个人进来之后5秒后关门, 假设第二个人在第4秒进来电梯也同样是这个点关门

码了这么多字, 也是挺累的, 写得晕乎乎的怕大家不看[捂脸], 大家相互学习, 哈哈

来,安排一下面试必考的函数节流 防抖

前言

概念

节流

防抖

使用场景

区别

来,安排一下面试必考的函数节流防抖