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

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

•  前言

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

•  概念       

1. 函数节流:  定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，若是在同一个单位时间内某事件被触发屡次，只有一次能生效
2. 函数防抖:  在事件被触发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)
        })复制代码

•  使用场景

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

•  区别

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

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

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