韦德体育节流函数不管事件触发有多频繁,只在最后停止滚动的时候触发一次

  • 栏目:前端 时间:2020-01-04 13:07
<返回列表

韦德体育 1

定义及解读

函数节流: 如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出
函数防抖:如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止

防抖

防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 秒,直至新的 3 秒内没有函数调用请求,此时执行函数,不然就以此类推重新计时。

节流函数允许一个函数在规定的时间内只执行一次,它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

js的防抖就是比如一个水龙头坏了一直在滴水,我们为了节约用水,那么我们会想办法让他不再滴的那么快,这就是防抖。常见的比如scroll,onresize这些高频触发的情况。

举一个小例子:假定在做公交车时,司机需等待最后一个人进入后再关门,每次新进一个人,司机就会把计时器清零并重新开始计时,重新等待 1 分钟再关门,如果后续 1 分钟内都没有乘客上车,司机会认为乘客都上来了,将关门发车。

节流

function throttle(method,context){
    method.tId = null;
    if(!method.tId){
        method.tId = setTimeout(function(){
            method.call(context);
            method.tId = null;
        },1000)
    }
}
const filter  = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;  
$("#email").on("keyup",checkEmail());  
function checkEmail(){  
    let timer=null;  
    return function (){  
        clearTimeout(timer);  
        timer=setTimeout(function(){  
            console.log('执行检查');  
        },800);  
    }  
}  

当第一次输入事件触发,设置定时:在800ms之后执行检查。
假如只过了100ms,上次的定时还没执行,此时清除定时,重新定时800ms。
紧跟着又来了一次输入,上次定时依然没执行,再次清除定时,重新定时800ms。
...
直到最近一次的输入,后面没有紧邻的输入了,这最近一次的输入定时计时结束,终于执行了检查代码。

这就是一个防抖函数利用闭包让作用域链的变量得以保存,每次获取结束时间与初始时间之差,如果大于我们设定的值就进行触发一次函数,然后设置初始时间为结束时间.

此时「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务;「1 分钟」就是计时器,它是司机决定「关门」的依据,如果有新的「乘客」上车,将清零并重新计时;「关门」就是最后需要执行的函数。

防抖

function debance(method,context){
    clearTimeout(method.tId); 
    method.tId = setTimeout(function(){
        method.call(context);
    },1000);
}
$(window).scroll(loadMore());  
function loadMore(){  
    var canRun=true;  
    return function(){  
        if(!canRun){return;}  
        canRun=false;  
        setTimeout(function(){  
            console.log("执行滚动事件");  
            var docHeight=$(document).height();  
            var winHeight=$(window).innerHeight();  
            var scrollDistance=$(window).scrollTop();  
            if( docHeight - (winHeight+scrollDistance) <=100 ){  
                console.log('加载中...');  
            }  
            canRun=true;  
        },600);  
    }  
} 

由于滚动事件非常频繁,稍微滚动一下就会触发许多次,如果频繁触发的滚动,每一次都去检查是否到页面底部了再次造成了浪费。
于是设置一个开关,一次只能有一个触发执行,并对执行设置计时一段时间再执行,执行完毕之后再解锁。这就是函数节流。

节流

如果你还无法理解,看下面这张图就清晰多了,另外点击 这个页面 查看节流和防抖的可视化比较。其中 Regular 是不做任何处理的情况,throttle 是函数节流之后的结果,debounce 是函数防抖之后的结果。

节流就是比如关闭了水龙头后的最后水龙头还要再来一滴。也就是只在最后执行一次。

原理及实现

主要利用了setTimeout来实现,滚动的过程中我们一直清楚定时器,只在最后停止滚动的时候触发一次

实现原理就是利用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行。

防抖加节流

实现 1

那我们来组合一下:

// 实现 1// fn 是需要防抖处理的函数// wait 是时间间隔function debounce {// 通过闭包缓存一个定时器 idlet timer = null// 将 debounce 处理结果当作函数返回// 触发事件回调时执行这个返回函数return function {// 如果已经设定过定时器就清空上一次的定时器if  clearTimeout// 开始设定一个新的定时器,定时器结束后执行传入的函数 fntimer = setTimeout => {fn.apply}}// DEMO// 执行 debounce 函数返回新函数const betterFn = debounce => console.log// 停止滑动 1 秒后执行函数 () => console.logdocument.addEventListener

这就是一个防抖加节流的结合体。

实现 2

上述实现方案已经可以解决大部分使用场景了,不过想要实现第一次触发回调事件就执行 fn 有点力不从心了,这时候我们来改写下 debounce 函数,加上第一次触发立即执行的功能。

// 实现 2// immediate 表示第一次是否立即执行function debounce(fn, wait = 50, immediate) {let timer = nullreturn function clearTimeout// ------ 新增部分 start ------ // immediate 为 true 表示第一次触发后执行// timer 为空表示首次触发if  {fn.apply}// ------ 新增部分 end ------ timer = setTimeout => {fn.apply}}// DEMO// 执行 debounce 函数返回新函数const betterFn = debounce => console.log, 1000, true)// 第一次触发 scroll 执行一次 fn,后续只有在停止滑动 1 秒后才执行函数 fndocument.addEventListener

实现原理比较简单,判断传入的 immediate 是否为 true,另外需要额外判断是否是第一次执行防抖函数,判断依旧就是 timer 是否为空,所以只要 immediate && !timer 返回 true 就执行 fn 函数,即 fn.apply。

加强版 throttle

现在考虑一种情况,如果用户的操作非常频繁,不等设置的延迟时间结束就进行下次操作,会频繁的清除计时器并重新生成,所以函数 fn 一直都没办法执行,导致用户操作迟迟得不到响应。

有一种思想是将「节流」和「防抖」合二为一,变成加强版的节流函数,关键点在于「 wait 时间内,可以重新生成定时器,但只要 wait 的时间到了,必须给用户一个响应」。这种合体思路恰好可以解决上面提出的问题。

给出合二为一的代码之前先来回顾下 throttle 函数,上一小节中有详细的介绍。

// fn 是需要执行的函数// wait 是时间间隔const throttle =  => {// 上一次执行 fn 的时间let previous = 0// 将 throttle 处理结果当作函数返回return function {// 获取当前时间,转换成时间戳,单位毫秒let now = +new Date()// 将当前时间和上一次执行函数的时间进行对比// 大于等待时间就把 previous 设置为当前时间并执行函数 fnif (now - previous > wait) {previous = nowfn.apply}}}

结合 throttle 和 debounce 代码,加强版节流函数 throttle 如下,新增逻辑在于当前触发时间和上次触发的时间差小于时间间隔时,设立一个新的定时器,相当于把 debounce 代码放在了小于时间间隔部分。

// fn 是需要节流处理的函数// wait 是时间间隔function throttle {// previous 是上一次执行 fn 的时间// timer 是定时器let previous = 0, timer = null// 将 throttle 处理结果当作函数返回return function  {// 获取当前时间,转换成时间戳,单位毫秒let now = +new Date()// ------ 新增部分 start ------ // 判断上次触发的时间和本次触发的时间差是否小于时间间隔if (now - previous < wait) {// 如果小于,则为本次触发操作设立一个新的定时器// 定时器时间结束后执行函数 fn if  clearTimeouttimer = setTimeout => {previous = nowfn.apply// ------ 新增部分 end ------ } else {// 第一次执行// 或者时间间隔超出了设定的时间间隔,执行函数 fnprevious = nowfn.apply}}}// DEMO// 执行 throttle 函数返回新函数const betterFn = throttle => console.log// 第一次触发 scroll 执行一次 fn,每隔 1 秒后执行一次函数 fn,停止滑动 1 秒后再执行函数 fndocument.addEventListener

看完整段代码会发现这个思想和上篇文章介绍的 underscore 中 throttle 的实现思想非常相似。

underscore 源码解析

看完了上文的基本版代码,感觉还是比较轻松的,现在来学习下 underscore 是如何实现 debounce 函数的,学习一下优秀的思想,直接上代码和注释,本源码解析依赖于 underscore 1.9.1 版本实现。

// 此处的三个参数上文都有解释_.debounce = function(func, wait, immediate) {// timeout 表示定时器// result 表示 func 执行返回值var timeout, result;// 定时器计时结束后// 1、清空计时器,使之不影响下次连续事件的触发// 2、触发执行 funcvar later = function {timeout = null;// if  判断是为了过滤立即触发的// 关联在于 _.delay 和 restArgumentsif  result = func.apply;};// 将 debounce 处理结果当作函数返回var debounced = restArguments {if  clearTimeout;if  {// 第一次触发后会设置 timeout,// 根据 timeout 是否为空可以判断是否是首次触发var callNow = !timeout;timeout = setTimeout;if  result = func.apply;} else {// 设置定时器timeout = _.delay(later, wait, this, args);}return result;});// 新增 手动取消debounced.cancel = function() {clearTimeout;timeout = null;};return debounced;};// 根据给定的毫秒 wait 延迟执行函数 func_.delay = restArguments(function {return setTimeout {return func.apply;});

相比上文的基本版实现,underscore 多了以下几点功能。

1、函数 func 的执行结束后返回结果值 result

2、定时器计时结束后清除 timeout,使之不影响下次连续事件的触发

3、新增了手动取消功能 cancel

4、immediate 为 true 后只会在第一次触发时执行,频繁触发回调结束后不会再执行

小结

函数节流和防抖都是「闭包」、「高阶函数」的应用 函数节流 throttle 指的是某个函数在一定时间间隔内执行一次,在这 3 秒内 无视后来产生的函数调用请求 节流可以理解为养金鱼时拧紧水龙头放水,3 秒一滴 「管道中的水」就是我们频繁操作事件而不断涌入的回调任务,它需要接受「水龙头」安排 「水龙头」就是节流阀,控制水的流速,过滤无效的回调任务 「滴水」就是每隔一段时间执行一次函数 「3 秒」就是间隔时间,它是「水龙头」决定「滴水」的依据 应用:监听滚动事件添加节流函数后,每隔固定的一段时间执行一次 实现方案 1:用时间戳来判断是否已到执行时间,记录上次执行的时间戳,然后每次触发后执行回调,判断当前时间距离上次执行时间的间隔是否已经达到时间差 ,如果是则执行,并更新上次执行的时间戳,如此循环 实现方案 2:使用定时器,比如当 scroll 事件刚触发时,打印一个 hello world,然后设置个 1000ms 的定时器,此后每次触发 scroll 事件触发回调,如果已经存在定时器,则回调不执行方法,直到定时器触发,handler 被清除,然后重新设置定时器 函数防抖 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次 防抖可以理解为司机等待最后一个人进入后再关门,每次新进一个人,司机就会把计时器清零并重新开始计时 「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务 「1 分钟」就是计时器,它是司机决定「关门」的依据,如果有新的「乘客」上车,将清零并重新计时 「关门」就是最后需要执行的函数 应用:input 输入回调事件添加防抖函数后,只会在停止输入后触发一次 实现方案:使用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

上一篇:此时你就可以通过proxyTable来解决跨域问题,规范也支持得并不全 下一篇:直接调用,普通老师也会教好孩子

更多阅读

韦德体育节流函数不管事件触发有多频繁

前端 2020-01-04
定义及解读 函数节流: 如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时...
查看全文

直接调用,普通老师也会教好孩子

前端 2020-01-04
先看代码 转笔刀是老师,铅笔就是学生。 const xiaoming = { name: '小明', own: '铅笔', zhuanbidao: fun...
查看全文

如何使用HTML5地理位置定位功能,经纬度

前端 2020-01-04
经纬度位置无法获取的情况: 点评 :HTML5提供了地理位置等一系列API可以给用户使用,方便用...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有