美文网首页
2019-05-18

2019-05-18

作者: divine_zhouo | 来源:发表于2019-05-18 14:35 被阅读0次

    防抖和节流

    *本文参考
    https://blog.csdn.net/hupian1989/article/details/80920324
    &
    https://blog.csdn.net/github_39132847/article/details/82984971

    这里只是做一下复述,以便自己能够理解的更通透,原文图文并茂更宜理解*

    场景

    如鼠标移动事件onmousemove ,滚动事件onscroll,窗口大小改变onresize,输入框输入oninput。

    结果

    这些瞬间的操作都会导致这些事件被高频触发 ,如果响应事件逻辑稍微复杂点,会导致页面卡顿,假死等现象。

    方案

    防抖和节流是是针对响应跟不上触发频率的两种解决方案。

    debounce 防抖(两次事件触发之间满足一定的空闲时间,响应动作才执行一次)

    基本思想

    设定一个延迟值,当事件触发时,如果是在延迟值内再次触发则重新设置延迟,只有在延迟时间结束才会执行响应动作,也就是如果在指定的周期内频繁触发事件,响应动作是不会频繁执行的,只有周期时间到了才会执行。

    后期又扩展了前缘debounce,即执行动作在前,然后设定周期,周期内有事件被触发,不执行动作,且周期重新设定。

    业务场景

    A:百度搜索。一般搜索绑定输入事件(每次触发输入事件都会触发),如果触发一下就搜索一次,就会给服务器造成巨大压力。所以百度搜索利用防抖:当用户一直在输入的时候,比如说规定时间0.2秒,0.2秒内触发输入事件触发五次,那么这期间都不会触发远程搜索,当某一次输入后停顿满0.2秒才会去触发远程搜索。

    B、地图加载:地图的加载是很缓慢的,一般只加载一定范围内的,然后等用户拖动地图到一个之前没加载的地方时,这个时候地图就该加载新的一部分。

    代码
    版本一:(缺陷:需要高频的创建定时器)
    let debounce  = (fn, wait) => {
        let timer, timeStamp = 0
        let context, args
    
        let run  = () => {
            timer = setTimeout( () => {
            fn.apply(context, args)
            }, wait)
        }
    
        let clean = () => {
            clearTimeout(timer);
        }
    
        // 逻辑处理
        return function(){
            context = this
            args = arguments
            let now = (new Date()).getTime()
    
            if(now - timeStamp < wait) {
                // 在wait 值内 需要重置。先清除定时器,再重置wait值
                clean()
                run()
            } else {
                // 执行 fn(响应方法)
                run()
            }
      }
    }
    
    版本二:(对版本一的优化,逻辑判断放在定时器里)

    周期内有新事件触发时,重置定时器开始时间戳,定时器执行时,判断开始时间戳,若开始时间戳被推后,重新设定延时定时器

    let debounce = (fn, wait) => {
        let timer, startTimeStamp = 0
        let context, args
     
        let run = (timerInterval) => {
            //定时器执行时
            timer = setTimeout(() => {
                let now = (new Date()).getTime()
                let interval = now - startTimeStamp
                //开始时间戳被推后(即startTimeStamp被重新赋值会变大,所以interval会变小)
                if(interval < timerInterval){ 
                    startTimeStamp = now
                    //重新设定延时定时器
                    run(timerInterval-interval) 
                }else{
                    fn.apply(context,args)
                    clearTimeout(timer)
                    timer = null
                }
                
            }, timerInterval)
        }
     
        return function(){
            context = this
            args = arguments
            let now = (new Date()).getTime()
            //新事件触发时,重置定时器开始时间戳
            startTimeStamp = now
     
            if( !timer ){
                run(wait)
            }   
        }
    }
    
    版本三:(在版本二的基础上加上前缘debounce)
    let debounce = (fn, wait, immediate=false) => {
        let timer, startTimeStamp = 0
        let context, args
     
        let run = (timerInterval) => {
            //定时器执行时
            timer = setTimeout(() => {
                let now = (new Date()).getTime()
                let interval = now - startTimeStamp
                //开始时间戳被推后(即startTimeStamp被重新赋值会变大,所以interval会变小)
                if(interval < timerInterval){ 
                    startTimeStamp = now
                    //重新设定延时定时器
                    run(timerInterval-interval) 
                }else{
                    if(!immediate){
                        fn.apply(context,args);
                    }
                    clearTimeout(timer)
                    timer = null
                }
                
            }, timerInterval)
        }
     
        return function(){
            context = this
            args = arguments
            let now = (new Date()).getTime()
            //新事件触发时,重置定时器开始时间戳
            startTimeStamp = now
     
            if( !timer ){
                if(immediate) {
                    fn.apply(context,args);
                }
                run(wait)
            }   
        }
    }
    

    throttling 节流(规定的时间内,多次触发事件,响应动作只执行一次)

    业务场景

    A、很多抢票、抢购这类操作很多都加了节流,为了避免用户大量点击造成服务器压力,当固定时间内,不论点击多少次,只执行一次抢的动作。

    B、很多界面操作,会需要更新当前界面的数据,如果这类操作非常的高频,数据就可以采用节流的形式。

    代码(考虑情况较简单,复杂情况可参考underscope 的_.throttle

    
    let throttling = (fn, wait, immediate) => {
        let timer, timeStamp=0;
        let context, args;
     
        let run = () => {
            timer=setTimeout(()=>{
                if(!immediate){
                    fn.apply(context,args);
                }
                clearTimeout(timer);
                timer=null;
            },wait);
        }
     
        return function () {
            context=this;
            args=arguments;
            if(!timer){
                console.log("throttle, set");
                if(immediate){
                    fn.apply(context,args);
                }
                run();
            }else{
                console.log("throttle, ignore");
            }
        }
    
    Lodash工具库里也有防抖节流的方法https://www.lodashjs.com/

    debounce和throttling 各有特点,
    在不同 的场景要根据需求合理的选择策略。
    如果事件触发是高频但是有停顿时,可以选择debounce;
    在事件连续不断高频触发时,只能选择throttling,
    因为debounce可能会导致动作只被执行一次,界面出现跳跃。

    相关文章

      网友评论

          本文标题:2019-05-18

          本文链接:https://www.haomeiwen.com/subject/ujxtzqtx.html