zoukankan      html  css  js  c++  java
  • typescript写防抖节流

    注意:在javascript 中,我们一般直接使用函数利用闭包封装,这里会涉及this ,在typescript 中如果还是用函数写,this就会受到限制,无法通过编译的,所以可以使用class解决

    防抖:在规定时间内重复操作一个事件只会执行一次,在时间段内会重新计算执行开始时间,常用与滚动事件,操作请求后台接口(防止频繁操作)

    节流:连续触发事件,n秒内只执行一次,节流会降低执行函数频率,可以用在并发的操作

     1 export class Debounced {
     2 
     3     /**
     4      * 
     5      * @param fn 要执行的函数
     6      * @param awit  时间
     7      * @param immediate 是否在触发事件后 在时间段n开始,立即执行,否则是时间段n结束,才执行
     8      */
     9     static use(fn:Function,awit:number=1000,immediate:boolean=false){
    10         let timer:NodeJS.Timeout|null
    11         return (...args:any)=>{
    12             if(timer) clearInterval(timer)
    13             if(immediate){
    14                 if(!timer) fn.apply(this,args);
    15                 timer = setTimeout(function(){//n 秒内 多次触发事件,重新计算.timeer 
    16                     timer = null;//n 秒内没有触发事件 timeer 设置为null,保证了n 秒后能重新触发事件 flag = true = !timmer  
    17                 },awit)
    18             }else{
    19                 timer = setTimeout(()=>{ fn.apply(this,args)},awit)
    20             }
    21         }
    22     }
    23 
    24 }
    export class Throttle{
        /**
         * 
         * @param fn 
         * @param awit 
         * @param immediate true 是启用时间戳版,false 是启用定时器版,作用一样
         */
        static use(fn:Function,awit:number=1000,immediate:boolean=true){
            //时间戳
            if(immediate){
                let prevTime = 0;
                return (...args:any)=>{
                    let nowTime = Date.now();
                    if(nowTime-prevTime>=awit){
                        fn.apply(this,args)
                        prevTime=nowTime
                    }
                }
            }else{
                //定时器
                let timer: NodeJS.Timeout|null;
                return (...args:any)=>{
                    if(!timer){
                        fn.apply(this,args)
                        timer = setTimeout(() => {
                            timer&&clearTimeout(timer)
                            timer= null
                        }, awit);
                    }
                   
                }
            }
    
            
        }
        
    
    }
  • 相关阅读:
    tensorflow的日常Demo
    docker 搭建Mysql集群
    简单版nginx lua 完成定向流量分发策略
    简单版nginx lua 完成流量上报于中间件
    redis 数据备份持久化方案
    nginx 场景业务汇总 (中)
    nginx 场景业务汇总 (初)
    Sentinel 哨兵 实现redis高可用
    工地信息化——施工现场网格化管理系统实施小记
    小记 xian80 坐标转换 wgs84
  • 原文地址:https://www.cnblogs.com/beyonds/p/13892548.html
Copyright © 2011-2022 走看看